@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        @include('gambling.parts.top')
        <div class="col-md-12 ">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div>
                    <a class="btn btn-success" href="#">CALENDARIZAR</a>
                        <!-- <a class="btn btn-success" href="{{ route('gambling-offers-calendarizacao-create')}}">CALENDARIZAR</a> -->
                    </div>
                </div>
                <div class="panel-body">

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
                    
                    <div id='calendar'></div>
                        <script>
                            jQuery(document).ready(function($) {
                                // page is now ready, initialize the calendar...
                                $('#calendar').fullCalendar({
                                //     // put your options and callbacks here
                                    defaultView: 'agendaWeek',
                                    events : [
                                        @foreach($Agendamentos as $Agendamento)
                                            {
                                                title : '{{$Agendamento->OfferName }}<br>' + '{{ $Agendamento->Position}}',
                                                start : '{{ $Agendamento->StartDate }}',
                                                @if ($Agendamento->EndDate)
                                                    end: '{{ $Agendamento->EndDate }}',
                                                @endif
                                                offerID : {{ $Agendamento->OfferID }}
                                            },
                                        @endforeach
                                    ],
                                    eventClick: function(calEvent, jsEvent, view) {
                                        $('#start_time').val(moment(calEvent.start).format('YYYY-MM-DD HH:mm:ss'));
                                        $('#finish_time').val(moment(calEvent.end).format('YYYY-MM-DD HH:mm:ss'));
                                        $('#offerID').val((calEvent.offerID));
                                        jQuery('#editModal').modal($);
                                    }
                                });
                            });
                        </script>
                </div>

                <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <h4>Editar calendarização</h4>
                                Start:
                                <br />
                                <input type="text" class="form-control" name="start_time" id="start_time">
                                End:
                                <br />
                                <input type="text" class="form-control" name="finish_time" id="finish_time">
                                <br />
                                <input type="text" class="form-control" name="offerID" id="offerID">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <input type="button" class="btn btn-primary" id="appointment_update" value="Save">
                            </div>
                        </div>
                    </div>
                </div>


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

@endsection