@extends('adminlte::page')

@section('title', 'Citas programadas')

@section('content_header')
    <h1>Citas programadas recuperación de Cartera</h1>
@stop

@section('content')
    <p>Gestion de reuniones recuperación de Cartera</p>

    <div class="card">

        <div id='calendar'></div>
        
    </div>

@stop

@section('css')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
@endsection

@section('js')
    
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.13/index.global.min.js'></script>

<script>

    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.getElementById('calendar');
      const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: @json($events)
      });
      calendar.render();
    });

</script>



@stop