{% extends "base.html" %}

{% load static %}

{% block extra_css %}
<link rel='stylesheet' type='text/css' href="{% static 'calendario/css/fullcalendar.css' %}"/>

{% endblock extra_css %}



{% block content %}


      <!-- End Navbar -->
      <div class="content">
        <div class="container-fluid">
          <div class="row">

            

            {% if user.is_authenticated %}
            <button onclick="abrir_modal_crearpreventivo('{% url 'crearpreventivo' %}')" class="btn btn-primary">Crear</button> <br>
            {% endif %}
            <div class="col-md-12">
              <div class="card"> 
                <div class="card-header card-header-primary">
                  <h4 class="card-title ">SERVICIOS</h4>
                  <p class="card-category">PREVENTIVOS</p>
                </div>
                <div class="card-body">
                 
                    

                    <div id="calendar" class="card" style="padding: 20px;">


                    </div>


                   
                </div>
              </div>
            </div>
            
            
          </div>
        </div>
      </div>


      <div class="modal fade" id="crearpreventivo" role="dialog">    

      </div>
<!-- 
      <div class="modal fade" id="invsalida" role="dialog">    

      </div>

 -->
      {% endblock content %}

{% block javascript %}

<script type='text/javascript' src="{% static 'calendario/js/moment.min.js' %}"></script>
<script type='text/javascript' src="{% static 'calendario/js/fullcalendar.min.js' %}"></script>
<script type='text/javascript' src="{% static 'calendario/js/locale/es.js' %}"></script>
        


        <script>
            $(document).ready(function() {
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    events: [
                        {% for dato in listas %}
                            {
                                title: 'EQUIPO: {{ dato.n_control }}',
                                description: '{{ dato.notas }}',
                                start: '{{ dato.fecha_start | date:"Y-m-d" }}',
                                end: '{{ dato.fecha_end | date:"Y-m-d" }}',
                                color: '#3A87AD',
                                textColor: '#ffffff',
                            },
                        {% endfor %}
                    ],
                    eventClick: function (calEvent, jsEvent, view) {
                        $('#event-title').text(calEvent.title);
                        $('#event-description').html(calEvent.description);
                        $('#modal-event').modal();
                    },  
                });
            });
        </script>


        <script type="text/javascript">
            var $ = jQuery.noConflict();
            function abrir_modal_crearpreventivo(url){
            $('#crearpreventivo').load(url, function (){
                $(this).modal('show');
            });
            }
        </script>


<!-- 
      <script type="text/javascript">
        var $ = jQuery.noConflict();
        function abrir_modal_invsalida(url){
          $('#invsalida').load(url, function (){
            $(this).modal('show');
          });
        }
      </script>
 -->
      

{% endblock javascript %}