@extends('layout.app')

@section('content')
<div id="planning" class="container container-xxl vueComponent">
    <div class="row mb-3 sticky-top bg-white">
        <div class="col-2">
            <h1><a href="{{ route('planning.index') }}">{{__('Planning') }}</a></h1>
        </div>
        <div class="col pt-2">
            <h4 class="d-inline me-3">Légende</h4>
            <div class="d-inline">
                @foreach(CellType::toArray() as $type)
                <span style="background-color: {{ $type->value }}; border: 1px solid black;">{{ $type->label }}</span>
                @endforeach
            </div>
        </div>
    </div>
    <plannings-component
        browse-date='@json($date)'
        db-weeks='@json($weeks)'
        db-models='@json(CellModel::toArray())'
        db-types='@json(CellType::toArray())'
        db-rows='@json(TableRow::toArray())'></plannings-component>
</div>
@endsection

@push('scriptsConstants')
<script>
    window._routes = {
        "planning.index": "{{ route('planning.index') }}",
        "ticket.show": "{{ route('ticket.show', 'TICKET') }}",
        "projects.show": "{{ route('projects.show', 'PROJECT') }}",
        "sites.show": "{{ route('sites.show', 'SITE') }}",
        "ticket.index": "{{ route('ticket.index') }}",
        "projects.index": "{{ route('projects.index') }}",
        "sites.index": "{{ route('sites.index') }}",
        "planning.setCellContent": "{{ route('planning.setCellContent') }}",
        "planning.eraseCellContent": "{{ route('planning.eraseCellContent') }}"
    };
</script>
@endpush