@extends("admin.layout.base")
@extends("admin.layout.header")

@section("title")
    Ugentligt aktiviteter - Vis
@endsection

@section("path")
    <a href="" class="text-white">Vis ugentlig aktiviteter</a> /
@endsection

@section("content")
    <p hidden>{{ \Carbon\Carbon::setLocale('da_DK') }}</p>
     <table class="tbl mt-2 letterSpaceTable fixOverflow" id="table_id">
         <thead>
         <th>Uge</th>
         <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/preview.svg') }}" alt="preview"></th>
         @if(auth()->user()->can('event.edit'))
             <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/print-hvid.svg') }}" alt="Print"></th>
             <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/pencil.svg') }}" alt="Update"></th>
         @endif
         @if(auth()->user()->can('event.delete'))
             <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/trashcan.svg') }}" alt="Delete"></th>
         @endif
         </thead>
         <tbody>
         @foreach($multiEvents as $event)
                 <tr id="row_{{ $event->id }}">
                     <td>{{ $event->week}}</td>
                     <td><a id="preview" onclick="modalEventContent({{$event->id}})" style="cursor: pointer"><img class="w-100" src="{{ asset('/images/icons/preview-dark.svg') }}" alt="preview"></a></td>
                     @if(auth()->user()->can('event.edit'))
                         <td><a href="{{ route("multiPdf.genPDF", [ "multiEvent" => $event->id ]) }}" target="_blank"><img class="w-100" src="{{ asset('/images/icons/print.svg') }}" alt="Print"></a></td>
                         <td><a href="{{ route("multiple-events.edit", [ "multiEvent" => $event->id ]) }}"><img class="w-100" src="{{ asset('/images/icons/pencil-dark.svg') }}" alt="Update"></a></td>
                     @endif
                     @if(auth()->user()->can('event.delete'))
                         <td>
                             @csrf
                             <a class="w-100 nostyle" onclick="delete_event({{ $event->id }})"><img class="w-100 cursor-pointer" src="{{ asset('/images/icons/trashcan-dark.svg') }}" alt="Delete"></a>
                         </td>
                     @endif
                 </tr>
         @endforeach
         </tbody>
     </table>

    <div id="eventModal" class="modal zindex-100">
        <div id="modal-content" class="modal-content text-black d-block w-50">
            <span class="close" onclick="closeModal()">&times;</span>
            <center>
                <h1 id="week"></h1>
                <hr>
                <img id="eventimg">
                <p id="events"></p>
            </center>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        var modalEvent = document.getElementById("eventModal");

        function modalEventContent(id) {
            $.ajax({
                type: 'get',
                url: '{{route('multiple-events.preview')}}',
                data: {'preview':id},
                dataType: 'JSON',
                success:function (data) {
                    modalEvent.style.display = "flex";
                    $("#week").html('Uge: '+data[0].week);
                    if (data[0].resource_id != null)
                        $("#eventimg").attr('src', data[0].filename);

                    for (var i = 0; i < data[1].length; i++) {
                        $("#events").append("<div class='container text-center'><div class='row justify-content-center'><div class='col'><h1 class='mb-0'>"+data[1][i].name+"</h1>" +
                            "<h3 class='mt-0 mb-0'>"+data[1][i].date+" - "+data[1][i].event_end+"</h3>" +
                            "<h3 class='mt-0'>Tovholder: "+data[1][i].accountable+"</h3>" +
                            "<h3 class='mb-0'>Beskrivelse:</h3>" +
                            "<p class='mt-0'>"+data[1][i].description+"</p>" +
                            "</div>" +
                            "</div>" +
                            "</div><hr>");
                    }
                },
                error:function (data) {
                    console.log(data);
                }
            });
        }

        function closeModal() {
            modalEvent.style.display = "none";

            $("#week").html('');
            $("#eventimg").attr('src', '');
            $("#events").html('');
        }

        window.onmousedown = function(event) {
            if (event.target == modalEvent) {
                modalEvent.style.display = "none";

                $("#week").html('');
                $("#eventimg").attr('src', '');
                $("#events").html('');
            }
        }

        function delete_event(id) {
            var token = $("input[name='_token']").val();

            Swal.fire({
                title: 'Er du sikker?',
                text: "Dette kan ikke blive ændret tilbage!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Slet Aktiviteten',
                cancelButtonText: 'Annuller'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: "multiple-events/"+id,
                        data:{'_token':token, _method: 'DELETE'},
                        success: function () {
                            $('#table_id').DataTable().row($('#row_'+id)[0]).remove().draw();

                            Swal.fire(
                                'Aktiviteten er slettet!',
                                '',
                                'success'
                            )
                        },
                        error:function (data) {
                            console.log(data);
                        }
                    });
                }
            })
        }
    </script>
@endsection