@extends('back.layout.app')
@section('title', config('app.name') . ' - Planning opérations')

@php $breadcrumb = 'operations.planning'; @endphp

@section('content')

<div class="kt-container-fixed">
    <div class="flex flex-wrap items-center justify-between gap-5 pb-7.5">
        <div class="flex items-center gap-3">
            <h1 class="text-xl font-medium leading-none text-mono">Planning opérations</h1>
        </div>
        <div class="flex flex-wrap items-center gap-3 text-xs text-secondary-foreground">
            @foreach ($legend as $item)
                <span class="flex items-center gap-1.5">
                    <span class="inline-block w-3 h-3 rounded-full flex-shrink-0" style="background:{{ $item['color'] }}"></span>
                    {{ $item['label'] }}
                </span>
            @endforeach
        </div>
    </div>
</div>

<div class="kt-container-fixed">
    <div class="kt-card p-6">
        <div id="kt_operations_calendar"></div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('assets/vendors/fullcalendar/index.global.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('kt_operations_calendar');
    if (!calendarEl) return;

    var events = @json($operations);

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'fr',
        firstDay: 1,
        height: 'auto',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listMonth'
        },
        buttonText: {
            today: "Aujourd'hui",
            month: 'Mois',
            week: 'Semaine',
            list: 'Liste',
        },
        events: events,
        eventClick: function (info) {
            info.jsEvent.preventDefault();
            if (info.event.url) {
                window.location.href = info.event.url;
            }
        },
        eventDidMount: function (info) {
            info.el.style.cursor = 'pointer';
        },
    });

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