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

@section("content")
    <style>
        div.card {
            margin-top: 1rem;
            margin-bottom: 30px;
            width: auto;
            heigt: auto;
            border-bottom: 2px solid black;
        }
        div.container {
            padding: 8px;
            text-align: justify;
        }
        .header > img {
            border-radius: 10px 10px 0px 0px
        }
        /*Alert box*/
        .alert {
            opacity: 0.8;
            padding: 20px;
            background-color: #00788A;
            color: white;
            border-radius: 10px;
            background: linear-gradient(to right, red, purple);
        }
        .closebtn {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 20px;
            cursor: pointer;
            transition: 0.3s;
        }
        .closebtn:hover {
            color: black;
        }
        alertBoxBackground {
            margin-top: 1rem;
            margin-bottom: 30px;
            width: auto;
            heigt: auto;
        }
    </style>

    <?php
    $Week = date('W'); //Current week

    ?>

    <main>
        <p hidden>{{ setlocale(LC_ALL, 'da_dk')}}</p>
        <h1 class="text-center sde-blue mb-2rem">{{ __('msg.ugentligaktiviteter') }}</h1>
        <!--Alert box, display when a event is delete: start-->
        @if(count(\App\Notification::query()->where("user_id", "=", auth()->user()->id)->get()) > 0)
            <div class="alertBoxBackground" id="notifications">
                <div class="alert">
                    <span class="closebtn" onclick="deleteNotifications(document.getElementById('notifications'))">&times;</span>
                    <strong>{{__('msg.aktivitetaflyst')}}</strong>
                    @foreach(\App\Notification::query()->where("user_id", "=", auth()->user()->id)->get() as $notification)
                        <p>{{ $notification->message }}{{ __("msg.canceled") }}</p>
                    @endforeach
                </div>
            </div>
        @endif
    <!--Alert box, display when a event is delete: end -->

        <!--If there is a images to the event do this: Start-->
        @if(!$multiEvents->isEmpty())
            @foreach($multiEvents as $multiEvent)
                <div class="card">
                    <div class="container" class="mt-1">
                        <h4 class="m-none">{{ ucfirst(\Carbon\Carbon::parse($multiEvent->date)->formatLocalized('%A')) }}</h4>
                        <h4 class="m-none">{{$multiEvent->name}}</h4>
                        <p class="mt-0">{{__('msg.af')}}: {{$multiEvent->accountable}}</p>
                        <p class="mt-0">{{$multiEvent->description}}</p>
                        <p class="m-none">{{ \Illuminate\Support\Facades\Date::createFromTimeStamp(strtotime($multiEvent->date))->format('d/m/Y \k\l\. H:i') }}</p>
                        <div class="row justify-content-space mt-1">
                            @if (count(\App\UserEvent::query()->where('multiple_event_id', '=', $multiEvent->id)->where('user_id', '=', Auth::user()->id)->get()) > 0)
                                <a class="sde-blue text-center m-none p-none bold" href="javascript:void(0);" onclick="ajaxCall({{ $multiEvent->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 class="sde-blue text-center m-none p-none bold" href="javascript:void(0);" onclick="ajaxCall({{ $multiEvent->id }}, this)" >{{__('msg.tilmeld')}}</a>
                            @endif
                            <a class="sde-blue text-center m-none p-none bold" href="{{route("multiple-events.accountsignups", ["multiEvent" => $multiEvent->id ])}}">{{__('msg.sedeltagere')}}</a>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
        <button onclick="document.location = document.referrer;" class="btn btn-sde-blue text-white mb-1 mt-auto">{{ __('msg.tilbage') }}</button>
    </main>
    <div id="snackbar"></div>
@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(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;

                    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