{% extends 'index.html' %}
{% block content %}
{% load static i18n %}
{% load i18n %}

<!-- End of Navigation -->
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
    <div class="oh-wrapper">
        <div class="oh-dashboard row" id="dashboard">
            <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-12">
                <div class="oh-dashboard__cards row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-3 filter" id="paidPayslip">
                        <div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--success" >
                            <div class="oh-card-dashboard__header">
                                <span class="oh-card-dashboard__title">{% trans "Paid" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                    <span class="oh-card-dashboard__count">{{paid|length}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-3 filter" id="confirmedPayslip">
                        <div class="oh-card-dashboard oh-card-dashboard--neutral"

                        >
                            <div class="oh-card-dashboard__header">
                                <span class="oh-card-dashboard__title">{% trans "Confirmed" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                    <span class="oh-card-dashboard__count">{{posted|length}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-3 filter" id="reviewPayslip">
                        <div class="oh-card-dashboard oh-card-dashboard--warning"
                        >
                            <div style="text-decoration: none;" class="oh-card-dashboard__header">
                                <span class="oh-card-dashboard__title">{% trans "Review Ongoing" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                <a style="text-decoration: none;" class="oh-card-dashboard__counts">
                                    <span class="oh-card-dashboard__count"> {{review_ongoing|length}} </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-3 filter" id="draftPayslip">
                        <div class="oh-card-dashboard oh-card-dashboard--danger"
                        >
                            <div style="text-decoration: none;" class="oh-card-dashboard__header">
                                <span class="oh-card-dashboard__title">{% trans "Draft" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body">
                                <a style="text-decoration: none;" class="oh-card-dashboard__counts">
                                    <span class="oh-card-dashboard__count"> {{draft|length}} </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="oh-btn-group ms-2 mt-3 justify-content-between">
                    <div style = "cursor: pointer;">
                        <label for="monthYearField" class="text-danger fw-bold" style = "cursor: pointer;">{% trans "Select Month and Year:" %}</label>
                        <input class="oh-select p-3 m-1" type="month" id="monthYearField" name="monthYearField" style = "cursor: pointer;">
                    </div>

                    <div class="oh-main__titlebar-button-container">

                        <div class="oh-dropdown" x-data="{open: false}">
                          <button class="oh-btn oh-btn--secondary oh-btn--shadow ml-2" @click="open = !open">
                            <ion-icon name="download-outline" class="mr-1"></ion-icon>{% trans "Export" %}
                          </button>
                          <div
                          class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
                          x-show="open"
                          @click.outside="open = false"
                          style="display: none;"
                          >
                            <form method = "post" action="{% url 'dashboard-export' %}">
                                {% csrf_token %}
                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-6">
                                        <div class="oh-input-group">
                                            <label class="oh-label d-block">{% trans "Start Date" %}</label>
                                            {{export_form.start_date}}
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12 col-lg-6">
                                        <div class="oh-input-group" >
                                            <label class="oh-label d-block">{% trans "End Date" %}</label>
                                            {{export_form.end_date}}
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12 col-lg-6 ">
                                        <div class="oh-input-group">
                                        <label class="oh-label">{% trans "Employee" %}</label>
                                            {{export_form.employees}}
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12 col-lg-6 ">
                                        <div class="oh-input-group">
                                            <label class="oh-label d-block">{% trans "Status" %}</label>
                                            {{export_form.status}}
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                        <div class="oh-input-group">
                                            <label class="oh-label d-block">{% trans "Contributions" %}</label>
                                            {{export_form.contributions}}
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row-reverse" >
                                        <button
                                        class="oh-btn oh-btn--secondary oh-btn--shadow" type="submit" id="export"
                                        >
                                            <ion-icon
                                                class="me-2 md hydrated"
                                                name="download-outline"
                                                role="img"
                                                aria-label="download-outline"
                                            ></ion-icon
                                            >{% trans "Export" %}</button
                                        >
                                    </div>
                                </div>
                            </form>
                          </div>
                        </div>
                    </div>
                </div>

                <div class="oh-dashboard__movable-cards row mt-4">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 mb-4">
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider" style = "cursor: default;">
                                <span class="oh-card-dashboard__title" id="employee-previous" style = "cursor: pointer;"><ion-icon name="caret-back-outline"></ion-icon></span>
                                <span class="oh-card-dashboard__title">{% trans "Employee Payslips" %}</span>
                                <span class="oh-card-dashboard__title float-end" id="payroll-employee-next" style = "cursor: pointer;"><ion-icon name="caret-forward"></ion-icon></span>

                            </div>
                            <div class="oh-card-dashboard__body" id="employee_canvas_body">
                                <canvas id="employeeChart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12 col-lg-6" >
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
                            <h6 class="ms-4 m-2 fw-bold">{% trans "Total Payslips Genarated :" %}  <b><span class="payslip-number"></span></b></h6>
                            {% if position == "prefix" %}
                                <h6 class="ms-4 m-2 fw-bold">{% trans "Total Amount :" %} <b>{{currency}} <span class="payslip-amount"></span></b></h6>
                            {% else %}
                                <h6 class="ms-4 m-2 fw-bold">{% trans "Total Amount :" %} <b><span class="payslip-amount"></span> {{currency}}</b></h6>
                            {% endif %}
                            <h5 class="ms-4 m-2 fw-bold" style="color:#9C4000">{% trans "Department Total Amount" %}</h5>
                            <hr class="line">
                            <ul id="department_total" style="height: 286px; overflow-y: auto; list-style: disc;"></ul>
                            <ul id="department_total_empty" style="height: 232px; overflow-y: auto; list-style: disc;"></ul>
                        </div>
                    </div>

                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 mb-4">
                        <form hx-get="{% url 'get-contribution-report' %}" hx-trigger="load, submit"  hx-target="#contributionReportContainer" class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" >
                            <div class="d-flex justify-content-between oh-card-dashboard__header oh-card-dashboard__header--divider" style = "cursor: default;">
                                {% comment %} <span class="oh-card-dashboard__title" id="employee-previous" style = "cursor: pointer;"><ion-icon name="caret-back-outline"></ion-icon></span> {% endcomment %}
                                <span class="oh-card-dashboard__title">{% trans "Employer Contributions" %}</span>
                                <div>
                                    <span class="oh-card-dashboard__title">
                                        <select name="employee_id" class="oh-select" onchange="$(this).closest('form').find('[type=submit]').click()" id="deduction">
                                            {% for employee in get_active_employees %}
                                                {% if request.user == employee.employee_user_id %}
                                                    <option value="{{employee.id}}" selected>{{employee.get_full_name}}</option>
                                                {% else %}
                                                    <option value="{{employee.id}}">{{employee.get_full_name}}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                    </span>
                                    {% comment %} <span class="oh-card-dashboard__title">
                                        <select name="deduction_id" class="oh-select" onchange="$(this).closest('form').find('[type=submit]').click()" id="deduction">
                                            <option value="">{% trans "All" %}</option>
                                            {% for deduction in get_deductions %}
                                            <option value="{{deduction.id}}">{{deduction.title}}</option>
                                            {% endfor %}
                                        </select>
                                    </span> {% endcomment %}
                                </div>
                                {% comment %} <span class="oh-card-dashboard__title float-end" id="payroll-employee-next" style = "cursor: pointer;"><ion-icon name="caret-forward"></ion-icon></span> {% endcomment %}

                            </div>
                            <div class="oh-card-dashboard__body" id="contributionReportContainer" >
                            </div>
                            <button type="submit" hidden>
                        </form>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
                            <h4 class="ms-4 m-2 fw-bold text-danger">{% trans "Contracts ending " %}  <b><span class=""></span></b></h4>
                            <h6 class="ms-4 fw-bold" >{% trans "Number of contracts expiring in " %} <b class="contract-number"></b></h6>
                            <hr class="line">
                            <ul id="contract_ending" style="height: 200px; overflow-y: auto; list-style: disc;">

                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                <span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body" id="department_canvas_body" style="width: 50%; margin: 0 auto;" >
                                <canvas id="departmentChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="oh-modal" id="ContractModal" role="dialog" aria-labelledby="ContractModal" aria-hidden="true">
        <div class="oh-modal__dialog" style="max-width: 550px" id="contract_target"></div>
    </div>
</main>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{% static 'payroll/dashboard.js' %}"></script>
<script>
    $(document).ready(function() {
        $("#paidPayslip").on("click", function(){
            window.location.href='{% url "view-payslip" %}?status=paid'
        })
        $("#confirmedPayslip").on("click", function(){
            window.location.href='{% url "view-payslip" %}?status=confirmed'
        })
        $("#reviewPayslip").on("click", function(){
            window.location.href='{% url "view-payslip" %}?status=review_ongoing'
        })
        $("#draftPayslip").on("click", function(){
            window.location.href='{% url "view-payslip" %}?status=draft'
        })
    })

</script>
{% endblock content %}