@extends('Terminy::layouts.integrated')

@push('styles')
    @livewireStyles
@endpush

@push('scripts')
    @livewireScripts
@endpush

@section('content')
    @parent
    <section class="bg-white space-sm">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col">
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h1 class="h2 mb-0">{{ $udalost->nazov }}</h1>
                            <h2 class="lead mb-2">{{ \Illuminate\Support\Str::ucfirst($udalost->druh->label) }}</h2>
                            <div class="d-flex align-items-center">
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <span class="badge badge-secondary">
                                        @if($udalost->skoncila)
                                                Udalosť sa už konala
                                            @elseif($udalost->prebieha)
                                                Udalosť prebieha
                                            @elseif($udalost->nezacala)
                                                Udalosť sa ešte nekonala
                                            @else
                                                ???
                                            @endif
                                        </span>
                                        @if($udalost->povolena_registracia)
                                            <span class="badge badge-success">Povolená registrácia</span>
                                        @else
                                            <span class="badge badge-warning">Nie je povolená registrácia</span>
                                        @endif
                                        @if($udalost->nezacala)
                                            <span class="badge badge-secondary">
                                            Začne {{ $udalost->datum_od->diffForHumans(now(), \Carbon\CarbonInterface::DIFF_RELATIVE_TO_NOW, false, 4) }}
                                        </span>
                                        @endif
                                        @if($udalost->povolena_registracia)
                                            <span class="badge badge-secondary">
                                            Počet voľných miest je {{ $udalost->pocet_volnych_miest }}
                                        </span>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                    @include('flash::message')
                </div>
                <div class="col-auto">
                    <a href="{{ route('modul.terminy.frontend.udalosti.udalost.subor_kalendara', $udalost) }}" class="btn btn-success">
                        <i class="icon-calendar"></i>
                        Uložiť súbor kalendára
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="space-sm">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-12 col-md-8">
                    <ul class="list-inline d-flex justify-content-between">
                        <li class="list-inline-item">
                            <i class="icon-calendar mr-1"></i>Začiatok {{ $udalost->datum_od->translatedFormat('l jS F Y \o H:i') }}
                        </li>
                        <li class="list-inline-item">
                            <i class="icon-calendar mr-1"></i>Koniec {{ $udalost->datum_do->translatedFormat('l jS F Y \o H:i') }}
                        </li>
                    </ul>

                    <hr>

                    <h1 class="h2 mb-2">Voľba možností registrácie na udalosť</h1>
                    <span>Pre udalosť boli vytvorené možnosti, z ktorých je potrebné zvoliť vám najviac vyhovujúce</span>

                    <div class="alert alert-warning my-2" role="alert">Z uvedených možností je vyžadované zvoliť minimálne jednu možnosť z každej kategórie možností.</div>

                    <hr>

                    @livewire('Terminy::pages.udalosti.registracie.frontend.livewire.components.registracia_moznosti_udalosti_form', ['udalost' => $udalost])
                </div>

                <div class="col-12 col-md-4">
                    <div class="card">
                        <div class="card-img-top w-100" style="height: 400px">
                            @map([
                                'lat' => $udalost->miestoKonania->latitude,
                                'lng' => $udalost->miestoKonania->longitude,
                                'zoom' => 16,
                                'markers' => [
                                    [
                                        'title' => $udalost->miestoKonania->nazov,
                                        'lat' => $udalost->miestoKonania->latitude,
                                        'lng' => $udalost->miestoKonania->longitude,
                                        'popup' => '<h3>' . $udalost->miestoKonania->nazov . '</h3><p>' . $udalost->miestoKonania->ulica . '<br>' . $udalost->miestoKonania->obec . ', ' . $udalost->miestoKonania->psc . '<br>' . $udalost->miestoKonania->krajina . '</p>',
                                    ],
                                ],
                            ])
                        </div>
                        <div class="card-body">
                            <h5>{{ $udalost->miestoKonania->nazov }}</h5>
                            <p>
                                {{ $udalost->miestoKonania->ulica }}<br>
                                {{ $udalost->miestoKonania->obec }}, {{ $udalost->miestoKonania->psc }}<br>
                                {{ $udalost->miestoKonania->krajina }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    @mapstyles

    <style type="text/css">
        .gnw-map-service {
            height: 400px !important;
        }
    </style>
@endpush

@push('scripts')
    @mapscripts
@endpush