{% extends 'base.html.twig' %}
{% block title %}{{ title }}{% endblock %}
{% set SalaryTypeHOURLY = enum('\\App\\Enum\\EmployeeHistory\\SalaryType::HOURLY') %}
{% block body %}
<div class="card mb-5 mb-xl-10">
<div class="card-body pt-9 pb-0">
<!--begin::Details-->
<div class="d-flex flex-wrap flex-sm-nowrap mb-3">
<!--begin: Pic-->
<div class="me-7 mb-4">
<div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
<img src="{{ employee | avatar }}" alt="image"/>
<div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-{% if employee.activeEmployee %}success{% else %}danger{% endif %} rounded-circle border border-4 border-white h-20px w-20px"></div>
</div>
</div>
<!--end::Pic-->
<!--begin::Info-->
<div class="flex-grow-1">
<!--begin::Title-->
<div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
<!--begin::User-->
<div class="d-flex flex-column">
<!--begin::Name-->
<div class="d-flex align-items-center mb-2">
<a href="#"
class="text-gray-900 text-hover-primary fs-2 fw-bolder me-1">{{ employee.fullName }}</a>
<span class="btn btn-sm btn-light-{% if employee.activeEmployee %}success{% else %}danger{% endif %} fw-bolder ms-2 fs-8 py-1 px-3">{% if employee.activeEmployee %}Active{% else %}Inactive{% endif %}</span>
</div>
<!--end::Name-->
{% if employee.hasHistory %}
<!--begin::Info-->
<div class="d-flex flex-wrap fw-bold fs-6 mb-4 pe-2">
<div class="col min-w-125px me-7">
<div class="text-gray-600 mt-5">Département</div>
<div class="fw-bolder">{{ employee.lastHistoryOrNull.department.name }}</div>
<div class="text-gray-600 mt-5">Poste</div>
<div class="fw-bolder">{{ employee.lastHistoryOrNull.position.name }}</div>
</div>
<div class="col min-w-125px me-7">
<div class="text-gray-600 mt-5">Date de Début</div>
<div class="fw-bolder">{{ employee.lastHistoryOrNull.startDate.format('d/m/Y') }}</div>
<div class="text-gray-600 mt-5">Date de fin</div>
<div class="fw-bolder">{% if employee.lastHistoryOrNull.endDate is not null %}{{ employee.lastHistoryOrNull.endDate.format('d/m/Y') }}{% else %}-{% endif %}</div>
</div>
<div class="col min-w-125px me-7">
<div class="text-gray-600 mt-5">Type de Salaire</div>
<div class="fw-bolder">{{ employee.lastHistoryOrNull.salaryType.title }}</div>
<div class="text-gray-600 mt-5">Montant</div>
{% if is_granted('ROLE_ADMIN') or employee.lastHistoryOrNull.salaryType == SalaryTypeHOURLY %}
<div class="fw-bolder">{{ employee.lastHistoryOrNull.price }}</div>
{% else %}
<div class="fw-bolder">******</div>
{% endif %}
</div>
</div>
<!--end::Info-->
{% endif %}
</div>
<!--end::User-->
<!--begin::Actions-->
<!--end::Actions-->
</div>
<!--end::Title-->
<!--begin::Stats-->
<!--end::Stats-->
</div>
<!--end::Info-->
</div>
<!--end::Details-->
<!--begin::Navs-->
<ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder">
<li class="nav-item mt-2">
<a class="nav-link text-active-primary ms-0 me-10 py-5 active" data-bs-toggle="tab"
href="#overview_tab">Tableau de bord</a>
</li>
<li class="nav-item mt-2">
<a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#history_tab">Historique</a>
</li>
<li class="nav-item mt-2">
<a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#log_hour_tab">Pointages</a>
</li>
</ul>
<!--begin::Navs-->
</div>
</div>
<!--begin:::Tab content-->
<div class="tab-content" id="myTabContent">
<!--begin:::Tab pane-->
<div class="tab-pane fade show active" id="overview_tab" role="tabpanel">
<!--begin::Card-->
<div class="card card-flush mb-6 mb-xl-9">
<!--begin::Card header-->
<div class="card-header cursor-pointer">
<!--begin::Card title-->
<div class="card-title m-0">
<h3 class="fw-bolder m-0">Détails</h3>
</div>
<!--end::Card title-->
<!--begin::Action-->
<a href="{{ path('employee_edit', {'id': employee.id}) }}"
class="btn btn-primary align-self-center">Editer</a>
<!--end::Action-->
</div>
<!--begin::Card header-->
<!--begin::Card body-->
<div class="card-body p-9">
{% include 'employee/_employee_fields.html.twig' with{employee: employee, form: form, readonly: true} %}
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end:::Tab pane-->
<!--begin:::Tab pane-->
<div class="tab-pane fade show" id="history_tab" role="tabpanel">
<!--begin::Card-->
<div class="card pt-4 mb-6 mb-xl-9">
<!--begin::Card header-->
<div class="card-header border-0">
<!--begin::Card title-->
<div class="card-title">
<h2>Périodes de travail</h2>
</div>
<!--end::Card title-->
{% if employee.activeEmployee %}
<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed rounded-3 p-6">
<div class="d-flex flex-stack flex-grow-1">
<div class="fw-semibold">
<h4 class="text-gray-900 fw-bold">Notice</h4>
<div class="fs-6 text-gray-700">Afin d'ajouter une période il faut clôturer la
dernière période travaillé
</div>
</div>
</div>
</div>
{% else %}
<!--begin::Card toolbar-->
<div class="card-toolbar">
<!--begin::Filter-->
<a href="{{ path('employee_history_new', {'employee_id': employee.id}) }}" type="button"
class="btn btn-sm btn-flex btn-light-primary">
<!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
<span class="svg-icon svg-icon-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20"
height="20" rx="5" fill="black"/>
<rect x="10.8891" y="17.8033" width="12" height="2"
rx="1" transform="rotate(-90 10.8891 17.8033)"
fill="black"/>
<rect x="6.01041" y="10.9247" width="12" height="2"
rx="1" fill="black"/>
</svg>
</span>
<!--end::Svg Icon-->Ajouter
</a>
<!--end::Filter-->
</div>
<!--end::Card toolbar-->
{% endif %}
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body pt-0 pb-5">
<table class="table align-middle table-row-dashed gy-5" id="kt_table_employee_history">
<thead class="border-bottom border-gray-200 fs-7 fw-bolder">
<tr class="text-start text-muted text-uppercase gs-0">
<th class="min-w-100px">Département</th>
<th class="min-w-100px">Poste</th>
<th class="min-w-100px">Date de départ</th>
<th class="min-w-100px">Date de fin</th>
<th class="min-w-100px">Type de salaire</th>
<th>Montant</th>
<th class="min-w-100px">Commentaire</th>
<th>#</th>
</tr>
</thead>
<tbody class="fs-6 fw-bold text-gray-600">
{% for employeeHistory in employee.employeeHistories %}
<tr {% if loop.last %}class="table-active" {% endif %}>
<td>{{ employeeHistory.department.name }}</td>
<td>{{ employeeHistory.position.name }}</td>
<td>{{ employeeHistory.startDate.format('d/m/Y') }}</td>
<td>{% if employeeHistory.endDate is not null %}{{ employeeHistory.endDate.format('d/m/Y') }}{% endif %}</td>
<td>{{ employeeHistory.salaryType.title }}</td>
{% if is_granted('ROLE_ADMIN') or employeeHistory.salaryType == SalaryTypeHOURLY %}
<td>{{ employeeHistory.price }}</td>
{% else %}
<td>******</td>
{% endif %}
<td>{{ employeeHistory.reason }}</td>
<td>
{% if employeeHistory is same as employee.lastHistoryOrNull %}
<a href="{{ path('employee_history_edit', {'id': employeeHistory.id}) }}">Editer</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end:::Tab pane-->
<!--begin:::Tab pane-->
<div class="tab-pane fade show" id="log_hour_tab" role="tabpanel">
<!--begin::Card-->
<div class="card pt-4 mb-6 mb-xl-9">
<!--begin::Card header-->
<div class="card-header border-0">
<!--begin::Card title-->
<div class="card-title">
<h2>Pointages</h2>
</div>
<!--end::Card title-->
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body pt-0 pb-5">
<table class="table align-middle table-row-dashed gy-5" id="kt_table_employee_log_hour">
<thead class="border-bottom border-gray-200 fs-7 fw-bolder">
<tr class="text-start text-muted text-uppercase gs-0">
<th class="min-w-100px">Date</th>
<th class="min-w-100px">Type</th>
<th class="min-w-100px">Heure</th>
</tr>
</thead>
<tbody class="fs-6 fw-bold text-gray-600">
{% for log_hour in employee.employeeHourLogs %}
<tr>
{# <td>{{ log_hour.date | format_datetime('full', 'none', locale='fr') }}</td> #}
<td>{{ log_hour.date.format('d/m/Y') }}</td>
<td>{{ log_hour.inOut.title }}</td>
<td>{{ log_hour.date.format('H:i') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end:::Tab pane-->
</div>
<!--end:::Tab content-->
{% endblock %}
{% block javascripts %}
<script src="//cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js"></script>
<script>
var groupColumn = 0;
var table = $("#kt_table_employee_log_hour").DataTable({
columnDefs: [
{
targets: groupColumn,
visible: false,
type: "date-eu"
},
{
targets: [0, 1, 2],
orderable: false
}
],
order: [
[
groupColumn, "DESC"
]
],
displayLength: 500,
drawCallback: function (settings) {
var api = this.api();
var rows = api.rows({
page: "current"
}).nodes();
var last = null;
api.column(groupColumn, {
page: "current"
}).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
"<tr class=\"group fs-5 fw-bolder\"><td colspan=\"5\">" + group + "</td></tr>"
);
last = group;
}
});
}
});
$("#kt_table_employee_log_hour tbody").on("click", "tr.group", function () {
var currentOrder = table.order()[0];
if (currentOrder[0] === groupColumn && currentOrder[1] === "asc") {
table.order([groupColumn, "desc"]).draw();
} else {
table.order([groupColumn, "asc"]).draw();
}
});
</script>
{% endblock %}