@extends('layout.app')
<style>
    .datepicker.datepicker-inline{
        display: none !important;
    }
    .fc-unthemed td.fc-today{
        background-color: #f8c4bb !important;
    }
    .fc-day-grid-event {
        margin: 7px 2px 0 !important;
    }
</style>
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Calendario de publicaciones
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- /.col -->
        <div class="col-md-12">
          <div class="box box-default">
            <div class="box-body no-padding">
              <!-- THE CALENDAR -->
              <div id="calendar"></div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    @push('scripts')
    <!-- fullCalendar -->

    <script>
        $(function () {
          //Date for the calendar events
          var date = new Date()
          var d    = date.getDate(),
              m    = date.getMonth(),
              y    = date.getFullYear()

          $('#calendar').fullCalendar({
            header    : {
              left  : 'prev,next today',
              center: 'title',
              right : 'month,agendaWeek,agendaDay,listDay'
            },
            buttonText: {
              today: 'Hoy',
              month: 'Mes',
              week : 'Semana',
              day  : 'Dia',
              listDay: 'Lista'
            },
            // Load events from SocialScheduleEntry data
            events: {!! json_encode($socialScheduleEntries ?? []) !!},
            eventClick: function(event, jsEvent, view) {
                console.log(event);
                // Here you can handle click on an event
                // For example, redirect to edit page or show details
                // window.location.href = '/socialschedule/entries/' + event.id;
            },
            editable  : false,
            droppable : false
          });

          $('#btnEliminar').click(function(){
            //HERE  EVENTS REMOVE FROM FULLCALENDAR
            //previous version
            //$('#calendar').fullCalendar('removeEvents',eventDelete) 
            //full calendar v4
            var eventDelete= $('#event_id').val() ;
            var event = calendar.getEventById(eventDelete);
            event.remove();
           //call ajax
            $.ajax({
                type: 'POST', 
                url: "url....", 
                dataType: 'json', 
                headers:{"X-CSRFToken": csrftoken},
                encode: true,
                data: {'pk': eventDelete}, 
                success: function (data) {
                    /*
                    if (data['success']){
                           ......     
                    }  */
                },
            })  
        });
      

        })
      </script>
    @endpush
@endsection