@extends("app.layout.base")
@section("title")
    Aktiviteter
@endsection

@section("content")
    <style>
        div.card {
            margin-top: 1rem;
            margin-bottom: 30px;
            width: auto;
            heigt: auto;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

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

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

        ol {
            padding-right: 8px;
        }
    </style>

    <main>
        <h1 class="text-center sde-blue mb-2rem">{{__('msg.tilmeldteaktiviteter')}}</h1>
        {!! session()->get('eventunsubscribed') !!}
        @if(!$userevents['events']->isEmpty() || !$userevents['multiple']->isEmpty())
            @foreach($userevents as $key => $allevents)
                @foreach($allevents as $userevent)
                    <form method="post" action="{{ route("userevents.destroy", $userevent) }}">
                        @csrf
                        @method("delete")
                        <div class="card">
                            @if($userevent->resource_id !== null)
                                <div class="header bs-cover bp-center" style="background-image: url('{{ asset(\App\Resource::query()->where("id", "=", $userevent->resource_id)->first()->filename) }}');">
                                    <h3 class="event-text-shadow">{{ $userevent->name }}</h3>
                                    <p class="event-text-shadow text-center mt-0">{{__('msg.af')}}: {{ $userevent->accountable }}</p>
                                    <p class="event-text-shadow text-center mt-0">{{ \Illuminate\Support\Facades\Date::createFromTimeStamp(strtotime($userevent->date))->format('d/m/Y \k\l\. H:i') }}</p>
                                </div>
                            @else
                                <div class="header">
                                    <h3>{{ $userevent->name }}</h3>
                                    <p class="text-center mt-0">{{__('msg.af')}}: {{ $userevent->accountable }}</p>
                                    <p class="text-center mt-0">{{ \Illuminate\Support\Facades\Date::createFromTimeStamp(strtotime($userevent->date))->format('d/m/Y \k\l\. H:i') }}</p>
                                </div>
                            @endif
                            <div class="container">
                                <div class="row justify-content-space">
                                    @if (count(\App\UserEvent::query()->where('event_id', '=', $userevent->id)->where('multiple_event_id', '=', null)->where('user_id', '=', Auth::user()->id)->get()) > 0 || count(\App\UserEvent::query()->where('multiple_event_id', '=', $userevent->id)->where('event_id', '=', null)->where('user_id', '=', Auth::user()->id)->get()) > 0)
                                        <a class="sde-blue text-center m-none p-none bold" href="javascript:void(0);" @if($key == "events") onclick="ajaxCall({{ $userevent->id }}, this)" @elseif($key == "multiple") onclick="ajaxMultiCall({{ $userevent->id }}, this)" @endif id="t">{{__('msg.afmeld')}}</a>
                                    @else {{-- ^ If you're already participating in the event, then show a ´cancel´ button - v Else show a ´participate´ button --}}
                                    <a class="sde-blue text-center m-none p-none bold" href="javascript:void(0);" @if($key == "events") onclick="ajaxCall({{ $userevent->id }}, this)" @elseif($key == "multiple") onclick="ajaxMultiCall({{ $userevent->id }}, this)" @endif id="f">{{__('msg.tilmeld')}}</a>
                                    @endif
                                    <a class="sde-blue text-center m-none p-none bold" href="{{route("events.show", ["event" => $userevent->id ])}}">{{__('msg.læsmere')}}</a>
                                    <a class="sde-blue text-center m-none p-none bold" @if($key == "events") href="{{route("events.accountsignups", ["event" => $userevent->id ])}}" @elseif($key == "multiple") href="{{route("multiple-events.accountsignups", ["multiEvent" => $userevent->id])}}" @endif>{{__('msg.sedeltagere')}}</a>
                                </div>
                            </div>
                        </div>
                    </form>
                @endforeach
            @endforeach
        @else
            <p class="text-center">{{__('msg.duharikketilmeldtdignogenaktiviteter')}}!</p>
        @endif
        <a onclick="window.history.back()" type="submit" class="mt-auto btn text-center btn-sde-blue">{{__('msg.tilbage')}}</a>
        <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) {
            console.log(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>
    <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 ajaxMultiCall(multiple_event_id, el) {
            if(el.innerHTML === "{{__("msg.tilmeld")}}") {
                axios.post("{{ route("multiple-events.createajax") }}",
                    {
                        multiple_event_id: multiple_event_id
                    }
                ).then(function (response) {
                    var data = response.data;
                    console.log(data);

                    snackbar(data);

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

                    snackbar(data);

                    el.innerHTML = "{{__("msg.tilmeld")}}";
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }

        function deleteNotifications(el) {
            el.remove();
        }

        window.onload = function () {
            setMain();
            axios({
                method: 'delete',
                url: '{{route("notifications.delete")}}',
                data: {
                    user_id: {{ auth()->user()->id }}
                }
            });
        };
    </script>
@endsection