@extends('layouts.app')

@section('title', 'calendario')

@section('content')

@section('page-function', 'calendario')
<section class="content">
    <div class="container-fluid">
        @include('template.alert')
        <div class="row">
            <div class="col-12  mt-2">
                <div class="card">

                    <div class="card-header">
                        <h3 class="card-title">Calendário de Castração</h3>
                        <div class="card-tools">
                            <!-- <a href="javascript:void(0)" class="btn btn-default waves-effect" data-tt="tooltip"
                                data-title="Filtrar" data-toggle="modal" data-target="#modal_filtro">
                                <i class="fas fa-filter"></i>
                            </a> -->
                        </div>
                    </div>

                    <div class="card-body">
                        <div id='calendar'></div>
                    </div>

                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</section><!-- /.content -->

@include('castracao.widgets.calendar_modal')
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById("calendar");

        let calendar = new Calendar(calendarEl, {
            locale: 'pt-BR',
            plugins: [dayGridPlugin, timeGridPlugin, listPlugin],
            initialView: 'dayGridMonth',
            displayEventTime: true,
            editable: true,
            editable: true,
            selectable: true,
            businessHours: true,
            dayMaxEvents: true,
            selectable: true,
            navLinks: true,
            buttonText: {
                today:    'Hoje',
                month:    'Mês',
                week:     'Semana',
                day:      'Dia',
                year:     'Ano',
            },
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,listWeek'
            },

            //Chamar modal
            eventClick: function(calEvent, jsEvent, view) {
                fetchModalData(calEvent.event.id)
                $('#calendar_modal').modal('show');
            },

            // INÍCIO BUSCAR EVENTOS PARA EXIBIR NO CALENDÁRIO
            eventSources:[
                {
                    url:"{{route('castracao.get_calendario_datas')}}",
                    method: 'GET',
                    color: 'yellow',
                    textColor: 'black',
                    failure: function() {
                        alert('Nenhum evento encontrado');
                    },
                },
            ],
            // FIM BUSCAR EVENTOS PARA EXIBIR NO CALENDÁRIO

            // extraParams: function () {
            //     return {
            //         cachebuster: new Date().valueOf()
            //     };
            // }
        });
        calendar.render();
    });


    //pegar dadso ca castração e colocar nos campos do modal
    function fetchModalData(id) {
    $.ajax({
        url: "{{ route('castracao.fecthModalData') }}",
        data: { 'id' : id, '_token': '{{ csrf_token() }}' },
        type: "POST",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        success: function (response) {
            document.getElementById("animal_nome").value = response.animal_nome;
            document.getElementById("titular").value = response.titular;
            document.getElementById("clinica").value = response.clinica;
            document.getElementById("data_entrada").value = response.data_entrada;
            document.getElementById("data_agendamento").value = response.data_agendamento;
        }
    });
}

</script>
@endpush
@endsection