@extends('guest.layout')

@section('content')
<section class="page-title page-title-4 bg-secondary">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3 class="uppercase mb0">Agenda</h3>
            </div>
            <div class="col-md-6 text-right">
                <ol class="breadcrumb breadcrumb-2">
                    <li>
                        <a href="{{url('/')}}">Accueil</a>
                    </li>
                    <li class="active">Agenda</li>
                </ol>
            </div>
        </div>
    </div>
    @hasanyrole('Admin|Publisher')
        <span class="editCornerAdd">
            <a href="{{ url('/admin/agenda/create') }}" class="btn btn-sm btn-filled"><i class="fa fa-plus" aria-hidden="true"></i> Ajouter</a>
        </span>
    @endhasanyrole
</section>
<section class="ftco-section services-section bg-light">
    <div class="container">
        <div class="row">
            <div class="col-md-12 pt-5">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('head')
    <link href="https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css" rel="stylesheet"/>
    <link href="https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css" rel="stylesheet"/>
    <link href="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css" rel="stylesheet"/>

    <script src="https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js"></script>

    <script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
    <script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar'),
            date = new Date();
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
            defaultView: 'dayGridMonth',
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            locale: 'fr',
            eventRender: function(info) {
                $(info.el).popover({
                    html: true,
                    title: info.event.extendedProps.event,
                    content: `
                        <span>Lieu</span> : ${info.event.extendedProps.place}<br/>
                        <span>Date</span> : ${info.event.extendedProps.dates} à ${info.event.extendedProps.time}<br/>
                        <span>Tarif</span> : ${info.event.extendedProps.price}<br/>
                        @hasanyrole('Admin|Publisher')
                            <span class="editCorner">
                                <a href="/admin/agenda/${info.event.extendedProps.agendaId}/edit" class="btn btn-sm btn-filled-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Modifier</a>
                            </span>
                        @endhasanyrole
                    `,
                    trigger: 'hover click',
                    placement: 'auto',
                    container: 'body'
                });
            },
            events: [
                @foreach($agendas as $agenda)
                {
                    title: "{{$agenda->title}}",
                    event: "{{$agenda->title}}",
                    place: `{{$agenda->place}}`,
                    price: "{{$agenda->price}}",
                    dates: "{{$agenda->date->format('d/m/Y')}}",
                    time: "{{\Carbon\Carbon::createFromFormat('H:i:s',$agenda->time)->format('h\hi')}}",
                    start: "{{$agenda->date->format('Y-m-d')}}",
                    agendaId: "{{$agenda->id}}"
                },
                @endforeach
            ]
        });

        calendar.render();
    });
    </script>

<style>
    .editCorner {
        position: initial;
        float: right;
        margin-bottom: 5px;
    }
    .fc-scroller {
        height:100% !important;
    }
</style>
@endsection