@extends('dashboard::layouts.layout')

@push('header')
    <div class="header bg-primary pb-6">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <x-dashboard.breadcrumb-component>
                            <li class="breadcrumb-item active" aria-current="page">@lang('main.activity')</li>
                        </x-dashboard.breadcrumb-component>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endpush
@section('content')

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
{{--                            <h6 class="text-uppercase text-muted ls-1 mb-1">@lang('main.activities')</h6>--}}
                            <h5 class="h3 mb-0">@lang('main.activities')</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class='activity_timeline'>
                        <div class="row">

                            <div class="container py-2">

                                <!-- timeline item 1 -->
                            {{--                            <div class="row no-gutters">--}}
                            {{--                                <div class="col-sm"> <!--spacer--> </div>--}}
                            {{--                                <!-- timeline item 1 center dot -->--}}
                            {{--                                <div class="col-sm-1 text-center flex-column d-none d-sm-flex">--}}
                            {{--                                    <div class="row h-50">--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                    </div>--}}
                            {{--                                    <h5 class="m-2">--}}
                            {{--                                        <span class="badge badge-pill"><i class='far fa-plus-square'></i></span>--}}
                            {{--                                    </h5>--}}
                            {{--                                    <div class="row h-50">--}}
                            {{--                                        <div class="col border-right">&nbsp;</div>--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                                <!-- timeline item 1 event content -->--}}
                            {{--                                <div class="col-sm py-2">--}}
                            {{--                                    <div class="card">--}}
                            {{--                                        <div class="card-body">--}}
                            {{--                                            <div class="float-right text-muted small card-date">Jan 9th 2019 7:00 AM</div>--}}
                            {{--                                            <h4 class="card-title text-muted">Day 1 Orientation</h4>--}}
                            {{--                                            <p class="card-text">Welcome to the campus, introduction and get started with the tour.</p>--}}
                            {{--                                        </div>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}
                            @foreach ($activities as $activity)
                                <!-- timeline item 2 -->
                                    <div class="row no-gutters">
                                        @if ($loop->odd)
                                            <div class="col-sm"> <!--spacer--> </div>
                                            <div class="col-sm-1 text-center flex-column d-none d-sm-flex">
                                                <div class="row h-50">
                                                    <div class="col border-right">&nbsp;</div>
                                                    <div class="col">&nbsp;</div>
                                                </div>
                                                <h5 class="m-2">
                                                    @if ($activity->activityType() ==="created")
                                                        <span class="badge badge-pill"><i
                                                                class='far fa-plus-square'></i></span>
                                                    @elseif ($activity->activityType() ==="updated")
                                                        <span class="badge badge-pill"><i
                                                                class='far fa-edit'></i></span>
                                                    @elseif ($activity->activityType() ==="deleted")
                                                        <span class="badge badge-pill"><i class='far fa-trash-alt'></i></span>
                                                    @else
                                                        <span class="badge badge-pill"><i class='fa fa-info'></i></span>

                                                    @endif
                                                </h5>
                                                <div class="row h-50">
                                                    <div class="col border-right">&nbsp;</div>
                                                    <div class="col">&nbsp;</div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="col-sm py-2">
                                            <div class="card border-success shadow">
                                                <div class="card-body">
                                                    <div class="float-right small card-date">
                                                        {{$activity->created_at->format('l jS \of F Y h:i:s A')}}
                                                        {{--                                                        Jan 10th 2019 8:30 AM--}}
                                                    </div>
                                                    <h4 class="card-title">{{$activity->log_name}}</h4>
                                                    <p class="card-text">{!! $activity->description_text !!}</p>
                                                    <button class="btn btn-sm btn-outline-secondary" type="button"
                                                            data-target="#t22_details{{$activity->id}}"
                                                            data-toggle="collapse">@lang('main.show_details') ▼
                                                    </button>

                                                    <div class="collapse border" id="t22_details{{$activity->id}}">
                                                        @foreach ($activity->properties ?? [] as $key => $property)
                                                            <div class="p-2 text-monospace">
                                                                @if (is_array($property))
                                                                    <h4>{{$key}}</h4>
                                                                    @foreach ($property as $k=> $propertyItem)
                                                                        @if(!empty($propertyItem))
                                                                            <div> {{$k}} :
                                                                                @if (is_array($propertyItem))
                                                                                    <ul>
                                                                                        @foreach ($propertyItem as $key =>$value)
                                                                                            <li> {{$key}} : {{ is_array( $value ) ? implode($value):$value  }} </li>
                                                                                        @endforeach
                                                                                    </ul>
                                                                                @else
                                                                                    <small>{{$propertyItem}}</small>
                                                                                @endif
                                                                            </div>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    @if(!empty($property))
                                                                        <p>{{$property}}</p>
                                                                    @endif
                                                                @endif
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @if ($loop->even)
                                            <div class="col-sm-1 text-center flex-column d-none d-sm-flex">
                                                <div class="row h-50">
                                                    <div class="col border-right">&nbsp;</div>
                                                    <div class="col">&nbsp;</div>
                                                </div>
                                                <h5 class="m-2">
                                                    @if ($activity->activityType() ==="created")
                                                        <span class="badge badge-pill"><i
                                                                class='far fa-plus-square'></i></span>
                                                    @elseif ($activity->activityType() ==="updated")
                                                        <span class="badge badge-pill"><i
                                                                class='far fa-edit'></i></span>
                                                    @elseif ($activity->activityType() ==="deleted")
                                                        <span class="badge badge-pill"><i class='far fa-trash-alt'></i></span>
                                                    @else
                                                        <span class="badge badge-pill"><i class='fa fa-info'></i></span>

                                                    @endif
                                                </h5>
                                                <div class="row h-50">
                                                    <div class="col border-right">&nbsp;</div>
                                                    <div class="col">&nbsp;</div>
                                                </div>
                                            </div>
                                            <div class="col-sm"> <!--spacer--> </div>
                                        @endif
                                    </div>
                                    <!--/row-->

                            @endforeach
                            <!--/row-->

                                <!-- timeline item 3 -->
                            {{--                            <div class="row no-gutters">--}}
                            {{--                                <div class="col-sm"> <!--spacer--> </div>--}}
                            {{--                                <div class="col-sm-1 text-center flex-column d-none d-sm-flex">--}}
                            {{--                                    <div class="row h-50">--}}
                            {{--                                        <div class="col border-right">&nbsp;</div>--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                    </div>--}}
                            {{--                                    <h5 class="m-2">--}}
                            {{--                                        <span class="badge badge-pill"><i class='far fa-trash-alt'></i></span>--}}
                            {{--                                    </h5>--}}
                            {{--                                    <div class="row h-50">--}}
                            {{--                                        <div class="col border-right">&nbsp;</div>--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                                <div class="col-sm py-2">--}}
                            {{--                                    <div class="card">--}}
                            {{--                                        <div class="card-body">--}}
                            {{--                                            <div class="float-right text-muted small card-date">Jan 11th 2019 8:30 AM</div>--}}
                            {{--                                            <h4 class="card-title">Day 3 Sessions</h4>--}}
                            {{--                                            <p>Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual--}}
                            {{--                                                bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache.</p>--}}
                            {{--                                        </div>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}
                            <!--/row-->
                                <!-- timeline item 4 -->
                            {{--                            <div class="row no-gutters">--}}
                            {{--                                <div class="col-sm py-2">--}}
                            {{--                                    <div class="card">--}}
                            {{--                                        <div class="card-body">--}}
                            {{--                                            <div class="float-right text-muted small card-date">Jan 12th 2019 11:30 AM</div>--}}
                            {{--                                            <h4 class="card-title">Day 4 Wrap-up</h4>--}}
                            {{--                                            <p>Join us for lunch in Bootsy's cafe across from the Campus Center.</p>--}}
                            {{--                                        </div>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                                <div class="col-sm-1 text-center flex-column d-none d-sm-flex">--}}
                            {{--                                    <div class="row h-50">--}}
                            {{--                                        <div class="col border-right">&nbsp;</div>--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                    </div>--}}
                            {{--                                    <h5 class="m-2">--}}
                            {{--                                        <span class="badge badge-pill"><i class='far fa-clock'></i></span>--}}
                            {{--                                    </h5>--}}
                            {{--                                    <div class="row h-50">--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                        <div class="col">&nbsp;</div>--}}
                            {{--                                    </div>--}}
                            {{--                                </div>--}}
                            {{--                                <div class="col-sm"> <!--spacer--> </div>--}}
                            {{--                            </div>--}}
                            <!--/row-->
                            </div>
                            {{-- <ul class='activity_list'>
                                <li>
                                    <h3>Jhone doe</h3>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, illum.</p>
                                    <span>Tue Sep 01 2020 17:04:08</span>
                                </li>
                                <li>
                                    <h3>Jhone doe</h3>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, ab voluptatum doloremque consequuntur debitis eligendi?</p>
                                    <span>Tue Sep 01 2020 17:04:08</span>
                                </li>
                                <li>
                                    <h3>Jhone doe</h3>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, illum.</p>
                                    <span>Tue Sep 01 2020 17:04:08</span>
                                </li>
                                <li>
                                    <h3>Jhone doe</h3>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, illum.</p>
                                    <span>Tue Sep 01 2020 17:04:08</span>
                                </li>
                            </ul> --}}
                        </div>
                        {{$activities->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>

@stop