@extends('layouts.app')

@section('title', 'Agenda')

@section('content')

@section('page-function', 'Agenda')

<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">
                        Fazer Agendamento
                    </div>
                    <div class="card-body">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h4 class="card-title w-100">
                                    <a class="d-block w-100" data-toggle="collapse" href="#collapseOne">
                                        Funcionamento da agenda
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="collapse show">
                                <div class="card-body">
                                    A agenda considera data escolhida por clínica e na
                                    quantidade de vagas disponíveis para cada espécie e sexo do animal.
                                    <br>
                                    <ol>
                                        <li>Escolha a data que deseja liberar a agenda da clínica;</li>
                                        <li>Na janela que abriu, escolha a clínica que deseja liberar a agenda;</li>
                                        <li>Escolha a quantidade de vagas para cada espécie e sexo do animal;</li>
                                        <li>Salve.</li>
                                    </ol>
                                    Após isso, o calendário que aparece na triagem e no reagendamento da castração mostrará apenas as datas disponíveis. Os outros dias ficarão bloqueados.
                                    <br>
                                    É possível editar a agenda. Excluir somente caso não tenha sido utilizada.
                                    <br>
                                    Cada castração (pós triagem) consumirá uma vaga da agenda. Castrações que não forem
                                    realizadas, liberam as vagas.
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-3">
                            <div class="form-group">
                                <label for="clinicas">Filtrar pesquisa por clinica </label>
                                <select name="clinica" id="clinica_select_id" class="form-control" required>
                                    <option value="null">Todas as clínicas</option>
                                    @foreach ($clinicas as $clinica)
                                    <option value="{{$clinica->id}}">{{$clinica->nome}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12 col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>Calendário</h4>
                                    </div>
                                    <div class="card-body">
                                        <div id='calendar'></div>
                                    </div>
                                </div>
                            </div>
                        </div>

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

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

@include('clinica.widgets.calendar_modal')
@include('clinica.widgets.calendar_view_modal')

@push('scripts')
<script>

    var clinicas = document.getElementById('clinica_select_id');
    var clinicaId = clinicas.value;

    clinicas.addEventListener('change', function () {
        clinicaId = clinicas.value;
        carregarCalendario();
    });


    document.addEventListener('DOMContentLoaded', function () {
        carregarCalendario();
    });

    function carregarCalendario() {
        var eventSourceUrl = "{{ route('agenda.get_calendario_datas') }}";

        const calendarEl = document.getElementById("calendar");

        let calendar = new Calendar(calendarEl, {
            locale: 'pt-BR',
            plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
            initialView: 'dayGridMonth',
            displayEventTime: 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'
            },

            eventSources: [
                {
                    url: eventSourceUrl,
                    method: 'GET',
                    extraParams: {
                        _token: "{{ csrf_token() }}",
                        clinica_id: clinicaId,
                    },
                    color: 'blue',
                    textColor: 'white',
                    failure: function () {
                        // alert('Nenhuma Agenda encontrada');
                    },
                },
            ],

            eventClick: function (info) {
                document.getElementById('caninosFemeas_view').value
                    = info.event.extendedProps.caninosFemeas;
                document.getElementById('caninosMachos_view').value
                    = info.event.extendedProps.caninosMachos;
                document.getElementById('felinosFemeas_view').value
                    = info.event.extendedProps.felinosFemeas;
                document.getElementById('felinosMachos_view').value
                    = info.event.extendedProps.felinosMachos;

                document.getElementById('clinica_nome_view').innerText
                    = info.event.extendedProps.clinica_nome;
                document.getElementById('clinica_view_id').value
                    = info.event.extendedProps.clinica_id;
                document.getElementById('data_view').value
                    = moment(info.event.start).format('DD/MM/YYYY');

                document.getElementById('delete_btn').href
                    = info.event.extendedProps.deletar;

                document.getElementById('view_submit_btn').disabled
                    = true;
                var today = new Date();
                if (info.event.start >= today) {
                    document.getElementById('view_submit_btn').disabled
                        = false;
                }
                $('#calendar-ver_modal').modal('show');
            },

            dateClick: function (info) {
                var today = new Date();
                if (info.date >= today) {
                    document.getElementById("data").value = moment(info.dateStr).format('DD/MM/YYYY');
                    $('#calendar_modal').modal('show')
                } else {
                    // alert(info.date >= today);
                }
            }

            // FIM BUSCAR EVENTOS PARA EXIBIR NO CALENDÁRIO
        });
        calendar.render();
    }





</script>
@endpush


@endsection