{% extends 'template-secre.html.twig' %}

{% block title %}{{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}


{% block javascripts  %}
    {{ parent() }}
{% endblock %}

{% block body %}

    <div class="col-12">
        <div class="card">
            <div class="card">
                <div class="card-body">
                    <div class="col-2">
                        <a type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                            <i class="ni ni-fat-add"></i> Serviço clínico
                        </a>
                    </div>
                </div>

            </div>
            <div class="card-header">
                <h5 class="card-title text-uppercase">Lista de servícos clínicos</h5>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                {#{% include '_partials/_flash.html.twig' %}#}
                <table id="example1" class="table table-bordered  table-hover">
                    <thead>
                    <tr>
                        <th style="color: #ff8b33;"><i class="ni ni-calendar-grid-58" style="color: #ff8b33;"></i> Data do registo</th>
                        <th style="color: #ff8b33; text-align: center;"><i class="fa fa-hospital" style="color: #ff8b33;"></i> Nome do serviço</th>
                        <th style="color: #ff8b33; text-align: center;" ><i class="fa fa-bars" style="color: #ff8b33;"></i> Estado</th>
                        <th style="color: #ff8b33; text-align: center;"><i class="fa fa-text-height" style="color: #ff8b33;"></i> Data da ultima atualiazação</th>
                        <th style="color: #ff8b33; text-align: center;">Ações</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for servico in pagination %}
                        <tr>
                            <td>{{ servico.createdAt|date('d/m/y')}}</td>
                            <td style="text-align: center;">{{ servico.nome }}</td>
                            <td style="text-align: center;">
                                {% if servico.isAtivo == true %}
                                  {% set value = "Ativo" %}
                                  {% set color = "success" %}
                                {% else %}
                                    {% set value = "Ativo" %}
                                    {% set color = "danger" %}
                                {% endif %}
                                <span class="badge bg-{{ color }}">{{ value }}</span>
                            </td>
                            <td style="text-align: center;">{{ servico.updatedAt|date('d/m/y') }}</td>

                            <td style="text-align: center;">
                                <a href="{{ path('app_admin_servico_edit',{id:servico.id}) }}" class="btn btn-warning"><i class="ni ni-ruler-pencil"></i></a>
                               </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    {#<tfoot>
                      <tr>
                          <th>Rendering engine</th>
                          <th>Browser</th>
                          <th>Platform(s)</th>
                          <th>Engine version</th>
                          <th>CSS grade</th>
                      </tr>
                      </tfoot>#}
                </table>
                <div class="pagination " style="font-weight: bold; font-size: 18px; color: #0d5e42; padding: 20px;">
                    {{ knp_pagination_render(pagination) }}
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>


    <!-- Modal -->
    <div class="modal fade " id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">Cadastro de servíço clínico</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                {{ form_start(form) }}
                <div class="modal-body">
                    <label >Nome do serviço*</label>
                    {{ form_widget(form.nome,{attr:{'placeholder':'Digite o nome do serviço','class':'caixa shadow-none'}}) }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fa fa-close"></i> Fechar</button>
                    <button type="submit" class="btn btn-success" id="btn-servico"><i class="fa fa-save"></i> Salvar</button>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>

{% endblock %}