{% extends "theme/base.twig" %}
{% set area = 'comercial'%}
{% set type = 'ocorrencia'%}
{% block CSSfiles %}
    {{ parent() }}
    <!--suppress SpellCheckingInspection, SpellCheckingInspection, HtmlUnknownTarget -->
    <link rel="stylesheet" href="/assets/plugins/multiselect/multiselect.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/daterangepicker/daterangepicker.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="/assets/plugins/datatables/datatables.responsive.css?v={{ config.versionId }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
{% endblock %}

{% block JSfiles %}
    {{ parent() }}
    <script src="/assets/plugins/datatables/datatables.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.bootstrap.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.buttons.html5.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.jszip.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/datatables/datatables.responsive.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/daterangepicker/daterangepicker.js?v={{ config.versionId }}"></script>
    <script src="/assets/plugins/multiselect/multiselect.js?v={{ config.versionId }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
    <script src="/assets/js/local/ocorrencia.js?v={{ config.versionId }}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            flatpickr(".date-hour", {
                enableTime: true,  // Habilita a seleção de hora
                dateFormat: "d/m/Y H:i",  // Formato desejado
                time_24hr: true,  // 24 horas
                locale: "pt",  // Idioma em português
                minuteIncrement: 1  // Incremento de 1 minuto para a hora
            });
        });
    </script>
{% endblock %}
{% block content %}
<div class="row px-md-2 px-2 m-0 w-100 pt-2 mb-2 after-header">
        <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
            <div class="container-fluid px-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h1 class="mb-0 title-after-header py-2">Ocorrencia >> Listar</h1>
                    </div>
                    {% if 'ic_insert_ocorrencia' in permissions %}
                    <div class="col-auto d-flex align-items-center my-2 my-sm-0">
                        <a  class="btn btn-lg btn-primary btn-xs openModalOc">
                            <span>Nova Ocorrência</span>
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="row px-md-2 px-2 m-0 w-100 pt-2 mb-2 after-header">
        <div class="col-12 col-xl-12 col-xxl-12 d-flex align-items-stretch">
            <div class="card widthfull  shadow-dark-80 border border-gray-50 mb-3 mb-xl-5">
                <div class="card-body p-3 d-flex flex-column">
                    <div class="row w-100">
                        <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 filters">
                            <h5>Historico de Ocorrências</h5>
                            <table id="datatableOc" class="table nowrap table-no-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Tipo Ocorrência</th>
                                    <th>Lead</th>
                                    <th>Data Cadastro</th>
                                    <th>Responsável</th>
                                    <th>Status</th>
                                    <th class="text-center">Ações</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include '/ocorrencia/modal/ocorrencia.twig' %}
{% endblock %}