@include('layout.header')

<section id="content">
    <section class="bgGrey py-4">
        <div class="container">
            <div class="table-title p-0 pt-2 pb-2 text-bold" style="font-weight: bold;">
                My Activity
            </div>
            
            <table class="table table-striped table-custom mydatatable_export" data-excel-title="My Activity">
                <thead>
                    <tr>
                        <th style="width: 2%;">No</th>
                        <th style="width: 17%;">Tanggal Mulai</th>
                        <th style="width: 12%;">Tipe</th>
                        <th style="width: 20%;">Judul</th>
                        <th>Keterangan</th>
                        <th style="width: 17%;">Status</th>
                        <th style="width: 12%;">Action</th>
                    </tr>
                </thead>
                <tbody>
                                        @foreach ($activities as $item)
                                        <tr>
                        <td>{{$no}}</td>
                        <td>{{date('d M Y H:i', strtotime($item->start))}}</td>
                        <td>{{$item->type}}</td>
                        <td>{{$item->title}}</td>
                        <td>{{$item->description}}</td>
                        <td class="p-0 text-center">
                            @if (strtotime($item->end) <= time())
                                <table class="w-100">
                                    <tr>
                                        <td class="pr-0" style="width: 20px;">
                                            <span class="material-icons" style="color: green;">check_circle</span>
                                        </td>
                                        <td class="pl-1 text-left pt-3">
                                            <span style="color: green;font-weight: bold;">Completed</span>
                                        </td>
                                    </tr>
                                </table>
                            @endif
                        </td>
                        <td class="p-0 text-center">
                            <table class="w-100 cursor-pointer" data-toggle="modal" data-target="#detail-{{$item->id}}">
                                <tr>
                                    <td class="pr-0" style="width: 20px;">
                                        <span class="material-icons" style="color: #183b56;">table_view</span>
                                    </td>
                                    <td class="pl-1 text-left pt-3">
                                        <span style="color: #183b56;font-weight: bold;">Detail</span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <div id="detail-{{$item->id}}" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Activity Detail</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label for="form_title">Judul</label>
                                        <input type="text" disabled class="form-control" value="{{$item->title}}">
                                    </div>
                                    <div class="form-group">
                                        <label for="form_desc">Deskripsi</label>
                                        <textarea class="form-control" id="event_desc" disabled>{!! $item->description !!}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="form_start">Jam Mulai</label>
                                        <input type="text" disabled class="form-control" value="{{$item->start}}">
                                    </div>
                                    <div class="form-group">
                                        <label for="form_end">Jam Selesai</label>
                                        <input type="text" disabled class="form-control" value="{{$item->end}}">
                                    </div>
                                    <div class="form-group">
                                        <label for="form_end">Daftar Peserta</label>
                                        <ol>
                                            @foreach ($item->participants as $user)
                                            <li>{{$user->user->name}}</li>
                                            @endforeach
                                        </ol>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
</section>

@include('layout.footer')