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

@section("title")
    ugentlige aktiviteter - Tilmeldte
@endsection

@section("path")
    <a href="{{ route("multiple-events.index") }}" class="text-white">Vis Events</a> / <a href="" class="text-white">Vis Tilmeldte - {{ $multiEvent[0]->name }}</a> /
@endsection

@section("content")
    <table class="tbl mt-1" id="table_id">
        <thead>
            <th>Tilmeldtes Fornavn</th>
            <th>Tilmeldtes Efternavn</th>
            <th>Tilmeldtes Tlf Nr</th>
            <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/trashcan.svg') }}" alt="Delete"></th>
        </thead>
        <tbody>
            @foreach($multiEvent as $event)
                @if ($event->name_first != null && $event->name_last != null && $event->phone != null && $event->multiple_event_id != null && $event->user_id != null)
                    <tr>
                        <td>{{ $event->name_first }}</td>
                        <td>{{ $event->name_last }}</td>
                        <td>{{ $event->phone }}</td>
                        <td><form method="post" action="{{ route("multiple-events.destroy", [ "multiEvent" => $event->event_id ]) }}" class="w-100 nostyle">
                                @csrf
                                @method("delete")

                                <button name="signup" value="{{ $event->user_id }}" class="w-100 nostyle" onclick="return confirm('Are you sure you want to delete?');" type="submit"><img class="w-100 cursor-pointer" src="{{ asset('/images/icons/trashcan-dark.svg') }}" alt="Delete"></button>
                            </form>
                        </td>
                    </tr>
                @endif
            @endforeach
        </tbody>
    </table>
@endsection
@section('scripts')
    <script>
        $(document).ready( function () {
            $('#table_id').DataTable({
                columnDefs: [
                    { orderable: false, targets: [-1] }
                ]
            });
        });
    </script>
@endsection