@extends('layouts.master')

@section('content')
    <div class="cover-image"></div>
    <div class="page-description">
        @lang('descriptions.highlights')
    </div>
    <div class="page-content">
        <div id="highlights-container">
            <div class="headline">Ausgewählte Highlights:</div>

            <table id="highlights-table" data-toggle="table" data-classes="table table-no-bordered" data-escape="false" class="table">
                <thead>
                    <tr>
                        <th class="filiale_id" data-sortable="true" data-field="filiale" data-switchable="false">Filiale</th>
                        <th class="date" data-sortable="true" data-field="date" data-switchable="false">Datum</th>
                        <th class="title" data-sortable="true" data-field="title" data-switchable="false">Titel</th>
                        <th class="controls" data-sortable="true" data-field="controls" data-switchable="false"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($highlights as $highlight)
                        <tr>
                            <td>
                                {{ $highlight->filiale_id }}
                            </td>
                            <td>
                                @if ($highlight->date !== $highlight->end_date)
                                    {{ $highlight->date . " - " . $highlight->end_date }}
                                @else
                                    {{ $highlight->date }}
                                @endif
                            </td>
                            <td>
                                {{ $highlight->title }}
                            </td>
                            <td>
                                <a class="red-button delete-highlights" href="{{ route('delete-highlights', [$highlight->id]) }}">ENTFERNEN</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div id="active-events-container">
            <div class="headline">Alle Veranstaltungen:</div>

            <table id="active-events-table" data-toggle="table" data-pagination="true" data-search="true" data-toolbar="#toolbar" data-classes="table table-no-bordered" data-escape="false" class="table">
                <thead>
                    <tr>
                        <th class="filiale_id" data-sortable="true" data-field="filiale" data-switchable="false">Filiale</th>
                        <th class="date" data-sortable="true" data-field="date" data-switchable="false">Datum</th>
                        <th class="title" data-sortable="true" data-field="title" data-switchable="false">Titel</th>
                        <th class="controls" data-sortable="true" data-field="controls" data-switchable="false"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($active_events as $active_event)
                        <tr>
                            <td>
                                {{ $active_event->filiale_id }}
                            </td>
                            <td>
                                @if ($active_event->date !== $active_event->end_date)
                                    {{ $active_event->date . " - " . $active_event->end_date }}
                                @else
                                    {{ $active_event->date }}
                                @endif
                            </td>
                            <td>
                                {{ $active_event->title }}
                            </td>
                            <td>
                                @if ($limit_reached)
                                    <div class="grey-button">AUSWÄHLEN</div>
                                @else
                                    <a class="red-button add-highlights" href="{{ route('add-highlights', [$active_event->id]) }}">AUSWÄHLEN</a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('back_button')
    <a href="{{ route('home') }}" class="grey-button">Zurück</a>
@endsection