{% 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>
            <a href="{% url 'preventivoall' %}" class="btn btn-primary">Todos</a>
            {% 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" >  </div>


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


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

      </div>

      <div class="row">
        <div id="content" class="col-lg-12">
            
            <div class="modal fade" id="modal-event" tabindex="-1" role="dialog" aria-labelledby="modal-eventLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="event-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="event-description"></div>
                    <div id="event-start"></div>
                    <div id="event-user"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
                    
                </div>
                </div>
            </div>
            </div>
        </div>
      </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 today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay'
                    },
                    timeZone: 'America/Mexico_City',
                    events: [
                        {% for dato in datos %}
                            {
                                title: 'EQUIPO: {{ dato.n_control }} -- IB: {{ dato.usuario_id }} ',
                                description: '{{ dato.notas }}',
                                start: '{{ dato.fecha_start | date:"Y-m-d" }}',
                                end: '{{ dato.fecha_end | date:"Y-m-d" }}',
                                user: 'IB: {{ dato.usuario_id }}',
                                color: '#3A87AD',
                                textColor: '#ffffff',
                            },
                        {% endfor %}
                    ],
                    dayClick: function (date, jsEvent, view) {
                        alert('Has hecho click en: '+ date.format());
                    }, 
                    eventClick: function (calEvent, jsEvent, view) {
                        $('#event-title').text(calEvent.title);
                        $('#event-description').html(calEvent.description);
                        $('#event-start').text(calEvent.start);
                        $('#event-end').text(calEvent.end);
                        $('#event-user').text(calEvent.user);
                        $('#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 %}

      