<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<?php include "Views/templates/header.php"; ?>

<button class="btn btn-outline-primary mb-2" type="button" onclick="frmVenente();"><i class="fas fa-plus"></i></button>
<button class="btn btn-primary mb-2 btn-toolbar-status" disabled type="button" onclick="btnEditarVen(active_row);"><i class="fas fa-edit"></i></button>
<button class="btn btn-danger mb-2 btn-toolbar-status btn-eliminar" disabled type="button" onclick="btnEliminarVen(active_row);"><i class="fas fa-trash-alt"></i></button>
<button class="btn btn-success mb-2 btn-toolbar-status btn-recuperar" disabled type="button" onclick="btnReingresarVen(active_row);" style="display: none;"><i class="fas fa-toggle-on"></i></button>
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnWhatsappVen(active_row);"><i class="fas fa-comment"></i></button>

              

<script type='importmap'>
      {
        "imports": {
          "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.15",
          "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.15"
        }
      }
</script>

    <script type='module'>
      import { Calendar } from '@fullcalendar/core'
      import dayGridPlugin from '@fullcalendar/daygrid'

    
      document.addEventListener('DOMContentLoaded', function() {
      var initialLocaleCode = 'en';
      var localeSelectorEl = document.getElementById('locale-selector');
      var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          headerToolbar: {
            left: 'prevYear,prev,next,nextYear,today,addEventButton',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
          },

          buttonText :{
            today: 'Hoy',
            month: 'Mes',
            week:  'Semana',
            day:   'Dia',
            list:  'Listado',
          },

          height: 700, //TENGO PROBLEMAS CON ESTA PROPIEDAD NO SE VE MUY BIEN EN EL RESPONSIVE
          // VALOR height : 'Auto' deberia verse bien en responsive pero queda muy cort

          locale: initialLocaleCode,
          buttonIcons: true, // muestra los botones prev/next
          weekNumbers: false,
          navLinks: true, // permite dar click day/week
          editable: true,
          dayMaxEvents: true, // maximo de enventos
          //themeSystem:'standard', 

          customButtons: {
              addEventButton: {
              text: ' + ',
              //icon: 'clipboard-plus-fill',    // NO ME FUNCIONA :(
              click: function() {
                var dateStr = prompt('Enter a date in YYYY-MM-DD format');
                var date = new Date(dateStr + 'T00:00:00'); // will be in local time

                if (!isNaN(date.valueOf())) { // valid?
                  calendar.addEvent({
                    title: 'Nueva Tarea',
                    start: date,
                    allDay: true
                  });
                  alert('Listo. evento agregado...');
                } else {
                  alert('Fecha Invalida.');
                }
              }
              }
            },
             
            // Obtener datos desde el modelo y hacer parse de datos
            //events: 'https://app.distinsa.net/crm/eventos/getEventos',
            events: base_url+'eventos/getEventos',            

/*          events: [
              { 
                title: 'Evento de un dia',
                start: '2025-03-04', 
                end: '2025-03-04', 
                color: 'blue',                
              },

              { 
                title: 'Evento de otro color', 
                start: '2025-03-04', 
                end: '2025-03-04', 
                color: 'green',                
              },
              
              { 
                title: 'Evento de 2 dias', 
                start: '2025-03-11', 
                end: '2025-03-13', 
                color: 'red',
              },
           ]
  */
         
         });
  
 
      calendar.setOption('locale', 'es');
      calendar.render();


      /*calendar.getAvailableLocaleCodes().forEach(function(localeCode) {

          var optionEl = document.createElement('option');
          optionEl.value = localeCode;
          optionEl.selected = localeCode == initialLocaleCode;
          optionEl.innerText = localeCode;
          localeSelectorEl.appendChild(optionEl);

          localeSelectorEl.addEventListener('change', function() {
            if (this.value) {
              calendar.setOption('locale', this.value);
            }
          });

      });*/

      })
    </script>


<section class="content">
  <div class="container-fluid">
    <div class="card">
      <div class="card-body">
        <div id='calendar'></div>
      </div>
    </div>
  </div>
</section>

<?php include "Views/templates/footer.php"; ?>

