import {Calendar} from '@fullcalendar/core';
import locale from '@fullcalendar/core/locales/pt-br';
import dayGridPlugin from '@fullcalendar/daygrid';
import listWeek from '@fullcalendar/list'
import interaction from '@fullcalendar/interaction';
import Tooltip from 'tooltip.js';
import moment from 'moment';

import momentTimezone from '@fullcalendar/moment-timezone';

window.app = {};
$(document).ready(function () {
    $('#modalAgendar').iziModal({
        title: 'Agendar Consulta',
        headerColor: '#228B22',
        transitionIn: 'fadeInDown',
        transitionOut: 'fadeOutUp',
        afterRender: function () {
            $(document).on('click', '#btnAgendar', function () {
                let horario = $('#horario').val();
                let consulta = $('#consulta').val();
                let sintomas = $('#sintomas').val();
                let date = 'T' + horario + ':00';
                let start = new Date(app.data + date);
                app.calendar.addEvent({
                    title: consulta,
                    description: sintomas,
                    start: start,
                    allDay: true,
                    textColor: '#ffffff',
                });

                $('#modalAgendar').addClass('fade');
                $('#modalAgendar').iziModal('close');

            });
        }
    });

});
document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('agendaFuncionario');

    app.calendar = new Calendar(calendarEl, {
        plugins: [dayGridPlugin, interaction, momentTimezone, listWeek],
        locale: locale,
        defaultView: 'dayGridMonth',
        selectable: true,
        timeZone: 'America/Sao_Paulo',
        slotDuration: '00:15:00',
        editable: true,
        eventResizableFromStart: true,
        dateClick: function (dados) {
            app.data = dados.dateStr
            $('#modalAgendar').removeClass('fade');

            $('#modalAgendar').iziModal('open');

        },
        eventRender: function (info,) {
            debugger;
            new Tooltip(info.el,{
                title: info.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
            })
        }

    })

    app.calendar.render()
});

@extends('template')

@section('content')
    <main class="main">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active">Home</li>
        </ol>
        <div class="container-fluid">
            <div class="animated fadein">
                <div class="card">
                    <div class="card-header">
                        <h2>Calendário</h2>
                    </div>
                    <div class="card-body">
                        <div id="agendaFuncionario"></div>
                        <div id="modalAgendar" class="fade">
                            <form class="form-horizontal" id="agendar" method="POST">
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">Consulta</label>
                                    <div class="col-sm-10">
                                        <select name="consulta" id="consulta" class="form-control">
                                            <option value="" disabled selected>Selecione</option>
                                            <option value="Massagem">Massagem</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-4 control-label">Sintomas</label>
                                    <div class="col-sm-10">
                                        <select name="sintomas" class="form-control" id="sintomas">
                                            <option value="" disable selected>Selecione</option>
                                            <option value="dor nas costas">Dor nas costa</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-4 control-label">Horário da consulta</label>
                                    <div class="col-sm-10">
                                        <select name="hours" id="horario" class="form-control">
                                            <option value="" disabled selected>Selecione</option>
                                            <option value="14:00">14:00</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="button" id="btnAgendar" class="btn btn-success">Agendar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection