@extends("app.layout.base")
@section("content")
    <style>
        iframe, .ql-video {
            width: 100%;
        }

        div.card {
            margin-top: .5rem;
            margin-bottom: 7px;
            width: auto;
            @if(request()->cookie("mode") == "dark")
                background-color: #36393F;
            @else
                background-color: white;
            @endif
        }

        div.header {
            background-color: #00788a;
            color: white;
            padding: 8px;
            font-size: 10px;
            text-align: center;
            height: 200px;
            width: auto;
        }

        div.container {
            padding: 3px 13px 13px 13px;
            text-align: justify;
            line-height: 1.5;
        }

        ol {
            padding-right: 8px;
        }

        .title{
            margin-left: 50px;
            padding: 10px 10px;
            font-size: 22px;
            line-height: 30px;
        }

        .img{
            width: 1em;
            height: calc(1em + 20px);
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 5px;
            font-size: 20px;
            padding: 0 10px;
            border-color: #00788a;
            border-radius: 100%;
            background-color: #00788a;
            line-height: 30px;
            float: left;
            display: flex;
            justify-content: center;
        }

        .img > a {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
        }

        .information{
            text-align: center;
            @if(request()->cookie("mode") == "dark")
            background-color: #202225;
            @else
            background-color: rgba(240,240,240,0.8);
            @endif
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            width: 100%;
            height: 25px;
        }

        .information2{
            text-align: center;
            @if(request()->cookie("mode") == "dark")
            background-color: #202225;
            @else
            background-color: rgba(240,240,240,0.8);
            @endif
            width: 100%;
            height: 25px;
        }

        .card > .img > a > img, .card > .img > img {
            width: 100%;
        }

        html,main{
            @if(request()->cookie("mode") == "dark")

            @else
                background-color: rgb(200,200,200);
            @endif
        }


    </style>
    <main style="justify-content: unset; padding: 0">
        @foreach($news as $new)
            <!--Code to list events-->
              @if($new->type == 'News')<!--Code that prints news-->
                  <div class="card">
                      <div class="img"><img src="{{URL::asset('/images/icons/news.svg')}}" alt="News:"></div>
                      <div class="title">{{ $new->subname }}</div>
                      @if($new->resource_id !== null)
                          <div class="header" style="background-size: cover; background-position: center; background-image: url('{{ asset(\App\Resource::query()->where("id", "=", $new->resource_id)->first()->filename) }}');"></div>
                      @endif

                      <div class="container" style="margin-top: 8px;">
                          {!! $new->content !!}
                      </div>
                  </div>
                @elseif($new->type == 'Menu')<!--Code that prints menuplan -->
                  <div class="card">
                      <div class="img"><a href="{{ route('menu-plans.index') }}"><img src="{{URL::asset('/images/icons/Menuplan.svg')}}" alt="Menuplan:"></a></div>
                      <div class="title">{{ $new->subname }}</div>
                      @if($new->resource_id !== null)
                          <div class="header" style="background-size: cover; background-position: center; background-image: url('{{ asset(\App\Resource::query()->where("id", "=", $new->resource_id)->first()->filename) }}');"></div>
                      @endif
                      <div class="container" style="margin-top: 8px;">
                          @if ($new->type_id == 1 || $new->type_id == 2) {{-- If it's a news or menu then display the whole message --}}
                          {!! $new->content !!}
                          @else {{-- If it's a menu, guide or event. Then display up to 300 characters of text --}}
                          {!! \App\Helpers::closetags(substr($new->content, 0, 300) ) !!}
                          @endif
                      </div>
                  </div>
                @elseif($new->type == 'Activity')<!--Code that prints events-->
                    <div class="card">
                        <div class="img"><a href="{{ route('events.index') }}"><img src="{{URL::asset('/images/icons/Aktiviteter.svg')}}" alt="Aktiviteter:"></a></div>
                        <div class="title">{{ $new->subname }}</div>
                        @if($new->resource_id !== null)
                            <div class="header" style="background-size: cover; background-position: center; background-image: url('{{ asset(\App\Resource::query()->where("id", "=", $new->resource_id)->first()->filename) }}');"></div>
                            <div class="information">{{ \Illuminate\Support\Facades\Date::createFromTimeStamp(strtotime(\App\Event::query()->where('id', '=', $new->arrangement_id)->first()->date))->format('d/m/Y \k\l\. H:i') }} | {{\App\Event::query()->where('id', '=', $new->arrangement_id)->first()->accountable}} </div>
                            <div class="container">
                                {!! \App\Helpers::closetags(substr($new->content, 0, 300) ) !!}
                                <div class="row" style="justify-content: space-between; padding-top: 12px;  border-top: 1px solid rgba(0, 0, 0, .2);">
                                    @if (count(\App\UserEvent::query()->where('event_id', '=', $new->arrangement_id)->where('user_id', '=', Auth::user()->id)->get()) > 0)
                                        <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="javascript:void(0);" onclick="ajaxCall({{ $new->arrangement_id }}, this)" >{{__('msg.afmeld')}}</a>
                                    @else {{-- ^ If you're already participating in the event, then show a ´cancel´ button - v Else show a ´participate´ button --}}
                                    <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="javascript:void(0);" onclick="ajaxCall({{ $new->arrangement_id }}, this)" >{{__('msg.tilmeld')}}</a>
                                    @endif
                                    <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="{{route("events.show", ["event" => $new->arrangement_id ])}}">{{__('msg.læsmere')}}</a>
                                    <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="{{route("events.accountsignups", ["event" => $new->arrangement_id ])}}">{{__('msg.sedeltagere')}}</a>
                                </div>
                            </div>
                        @else
                            <div class="container">
                                {!! \App\Helpers::closetags(substr($new->content, 0, 300) ) !!}
                                <div class="information2">{{ \Illuminate\Support\Facades\Date::createFromTimeStamp(strtotime(\App\Event::query()->where('id', '=', $new->arrangement_id)->first()->date))->format('d/m/Y \k\l\. H:i') }} | {{\App\Event::query()->where('id', '=', $new->arrangement_id)->first()->accountable}} </div>
                                <div class="row" style="justify-content: space-between; padding-top: 12px;  border-top: 1px solid rgba(0, 0, 0, .2);">
                                    @if (count(\App\UserEvent::query()->where('event_id', '=', $new->arrangement_id)->where('user_id', '=', Auth::user()->id)->get()) > 0)
                                        <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="javascript:void(0);" onclick="ajaxCall({{ $new->arrangement_id }}, this)" >{{__('msg.afmeld')}}</a>
                                    @else {{-- ^ If you're already participating in the event, then show a ´cancel´ button - v Else show a ´participate´ button --}}
                                    <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="javascript:void(0);" onclick="ajaxCall({{ $new->arrangement_id }}, this)" >{{__('msg.tilmeld')}}</a>
                                    @endif
                                    <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="{{route("events.show", ["event" => $new->arrangement_id ])}}">{{__('msg.læsmere')}}</a>
                                    <a style="margin: 0; padding: 0; font-weight: 700;" class="sde-blue text-center" href="{{route("events.accountsignups", ["event" => $new->arrangement_id ])}}">{{__('msg.sedeltagere')}}</a>
                                </div>
                            </div>
                        @endif
                    </div>
                @else<!--Code that prints guides-->
                  <div class="card">
                      <div class="img"><a href="{{ route('guides.index') }}"><img src="{{URL::asset('/images/icons/Vejledninger.svg')}}" alt="Vejledninger:"></a></div>
                      <div class="title">{{ $new->subname }}</div>
                      @if($new->resource_id !== null)
                          <div class="header" style="background-size: cover; background-position: center; background-image: url('{{ asset(\App\Resource::query()->where("id", "=", $new->resource_id)->first()->filename) }}');"></div>
                      @endif

                      <div class="container" style="margin-top: 8px;">
                          {!! \App\Helpers::closetags(substr($new->content, 0, 300) ) !!}
                          @if ($new->type == 'Guide') {{-- Else if's displaying guides, then show `Læs mere` --}}
                          <div class="row" style="justify-content: center; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .2);">
                              <a style="font-weight: 700;" href="{{route("guides.show", ["guide" => $new->arrangement_id])}}" class="sde-blue">{{__('msg.læsmere')}}</a>
                          </div>
                          @endif {{-- Else if it's a menu or news, then don't show a button at bottom --}}
                      </div>
                  </div>

                @endif
        @endforeach
        @if(count(\App\News::query()->orderBy("created_at", "desc")->get()) == 0)
            <p class="text-center">{{__('msg.ingennyheder')}}</p>
        @endif
            <div id="snackbar"></div>

    </main>
@endsection
@section("scripts")
    <script type="text/javascript">
        function snackbar(data) {
            var x = document.getElementById("snackbar");
            x.innerHTML = data;
            x.className = "show";

            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }

        function ajaxCall(event_id, el) {
            if(el.innerHTML === "{{__("msg.tilmeld")}}") {
                axios.post("{{ route("userevents.createajax") }}",
                    {
                        event_id: event_id
                    }
                ).then(function (response) {
                    var data = response.data;

                    snackbar(data);

                    el.innerHTML = "{{__("msg.afmeld")}}";
                }).catch(function (error) {
                    console.log(error);
                });
            } else if(el.innerHTML === "{{__("msg.afmeld")}}"){
                axios.post("{{ route("userevents.createajaxcancel") }}",
                    {
                        event_id: event_id
                    }
                ).then(function (response) {
                    var data = response.data;

                    snackbar(data);

                    el.innerHTML = "{{__("msg.tilmeld")}}";
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    </script>
@endsection