@extends('layouts.app')

@section('conteudo')
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

<style>
    #calendario {
        position: relative;
        width: 70%;
        margin: 0px auto;
    }
</style>

<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px;">
    <div class="bg-black-50">
        <div class="content content-full">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="flex-grow-1 fs-2 text-white my-2">
                    <i class="fa fa-boxes text-white-50 me-1"></i> Calendário
                </h1>
                <a class="btn btn-primary my-2" href="/dashboard">
                    <i class="fa fa-fw fa-plus"></i>
                    <span class="d-none d-sm-inline ms-1">Início</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- END Hero -->



<div class="content content-boxed">
    <div id='calendario'>
        <br />
        <form id="novo_evento" action="" method="post">
            Nome do Evento: <input type="text" name="nome" required /><br /><br />
            Data do Evento: <input type="date" name="data" required /><br /><br />
            <button type="submit"> Cadastrar novo evento </button>
        </form>
    </div>
</div>
<!-- END Page Content -->

<script>
    $(document).ready(function() {

        //CARREGA CALENDÁRIO E EVENTOS DO BANCO
        $('#calendario').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2016-01-12',
            editable: true,
            eventLimit: true,
            events: 'eventos.php',
            eventColor: '#dd6777'
        });

        //CADASTRA NOVO EVENTO
        $('#novo_evento').submit(function() {
            //serialize() junta todos os dados do form e deixa pronto pra ser enviado pelo ajax
            var dados = jQuery(this).serialize();
            $.ajax({
                type: "POST",
                url: "cadastrar_evento.php",
                data: dados,
                success: function(data) {
                    if (data == "1") {
                        alert("Cadastrado com sucesso! ");
                        //atualiza a página!
                        location.reload();
                    } else {
                        alert("Houve algum problema.. ");
                    }
                }
            });
            return false;
        });
    });
</script>


@endsection