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

@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 col-lg-7">
                    <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>

                    <h5 class="mb-4">Dodatočné informácie</h5>
                    <article>
                    @if(!empty($udalost->popis))
                        {!! $udalost->popis !!}
                    @else
                        <p class="text-muted">bez dodatočných informácií</p>
                    @endif
                    </article>
                </div>

                <div class="col-12 col-md-4">
                    <div class="card">
                        <div class="card-img-top w-100" style="height: 200px">
                            @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>
                                <a href="https://www.google.com/maps/dir/?api=1&destination={{ $udalost->miestoKonania->latitude }},{{ $udalost->miestoKonania->longitude }}" target="_blank" class="btn btn-outline-primary">Navigovať</a>
                                @if(config('terminy.podpora.telefon'))
                                <a href="tel:{{ config('terminy.podpora.telefon') }}" class="btn btn-outline-primary"><i class="icon-phone"></i></a>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card card-borderless bg-secondary">
                        <div class="card-body">
                        @if($udalost->je_dostupna_registracia)
                            @if(false === $pouzivatelJeUzRegistrovany)
                            <form id="new-reg-form" action="{{ route('modul.terminy.frontend.registracie.pouzivatel.create', $udalost) }}" method="POST" style="display:none;">
                                @csrf
                            </form>
                            <a href="{{ route('modul.terminy.frontend.registracie.pouzivatel.create', $udalost) }}"
                               class="btn btn-lg btn-primary btn-block"
                               onclick="event.preventDefault();document.getElementById('new-reg-form').submit();"
                            >Zaregistrovať sa na udalosť</a>
                            @else
                            <form id="del-reg-form" action="{{ route('modul.terminy.frontend.registracie.pouzivatel.delete', $udalost) }}" method="POST" style="display:none;">
                                @csrf
                                @method('DELETE')
                            </form>
                            <a href="{{ route('modul.terminy.frontend.registracie.pouzivatel.delete', $udalost) }}"
                               class="btn btn-lg btn-danger btn-block"
                               onclick="event.preventDefault();document.getElementById('del-reg-form').submit();"
                            >Zrušiť moju registráciu na udalosť</a>
                            @endif
                        @else
                            <button class="btn btn-lg btn-primary btn-block"
                                    disabled="disabled"
                            >Registrovať sa na udalosť</button>
                        @endif
                        </div>
                    </div>

                    @hasrole('spravca_pek')
                    <div class="card card-borderless bg-secondary">
                        <div class="card-body">
                            @if($udalost->je_dostupna_registracia)
                            <a href="{{ route('modul.terminy.frontend.registracie.pracovisko.index', $udalost) }}"
                               class="btn btn-lg btn-primary btn-block"
                            >Registrácie z môjho pracoviska</a>
                            @else
                            <button class="btn btn-lg btn-primary btn-block"
                                    disabled="disabled"
                            >Registrácie z môjho pracoviska</button>
                            @endif
                        </div>
                    </div>
                    @endhasrole

                    @includeIf('Terminy::pages.udalosti.partials.zoznam_buducich_udalosti')
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    @mapstyles

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

@push('scripts')
    @mapscripts
@endpush