{% extends "theme/base.twig" %}
{% set area = 'comercial'%}
{% set type = 'agenda'%}


{% 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="/assets/css/local/perfil.css?v={{ config.versionId }}">
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

{% endblock %}

{% block JSfiles %}
    {{ parent() }}
    <script>
        let parameters = {{ parameters|json_encode|raw }};

        let arrayEventAgenda = {{ arrayEventAgenda|json_encode|raw }};
        console.log(arrayEventAgenda)

        flatpickr(".date", {
            dateFormat: "d/m/Y"
        });
       
    </script>

    <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="/assets/js/local/calendar.js?v={{ config.versionId }}"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.8/index.global.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></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">Agenda >> Calendario</h1>
                    </div>
                </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-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                        {% if session.session_user.id == 1 %}
                            <div class="mb-md-2 pb-2">
                                <label class="form-label form-label-lg" for="role">Selecione á Conta 
                                    <star>*Visivel para administrador*</star>
                                </label>
                                <select name="id_conta" class="form-control form-control-xl pesq_conta" id="id_conta" tabindex="6">
                               
                                    {% for itens in conta %}
                                        
                                        <option value="{{ itens.id }}" {{ selected }}  {{ disabled }}>{{ itens.razao_social }}</option>

                                    {% endfor %}
                                
                                </select>
                            </div>

                        {% endif %}
                        
                        </div>
                    </div>
                    <div class="row w-100">
                        <div class="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 filters">
                            <div id="calendar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include '/agenda/modal/form.twig' %}
{% endblock %}