@extends('client/layouts/contentNavbarLayout')

@section('title')
  {{ __('client.calendar') }}
@endsection

@section('page-script')
<script src="{{asset('assets/js/pages-account-settings-account.js')}}"></script>
<script src='{{ asset('js/fullcalendar.js') }}'></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var events = {!! json_encode($events) !!};
        var month = {!! json_encode(__('calendar.month')) !!};
        var week = {!! json_encode(__('calendar.week')) !!};
        var day = {!! json_encode(__('calendar.day')) !!};
        console.log(month);
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                right: 'dayGridMonth,timeGridWeek,timeGridDay prev,next',
            },
            navLinks: true,
            // allDaySlot: false,
            buttonText: {
              month: month,
              week: week,
              day: day
            },
            firstDay : 1,
            events: events,
            eventColor: '#696cff',
            eventTimeFormat: { 
              hour: '2-digit',
              minute: '2-digit',
              hour12: false
            },
        });
        calendar.setOption('locale', 'fr');
        calendar.render();
    });

</script>

@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('css/clients/calendar/calendar.css') }}">
@endsection

@section('content')
<div class="container">
    <div class="card p-4">
        <div id='calendar'></div>
    </div>
</div>

@endsection

@section('scripts')

@endsection