@extends('layouts.skeleton')

@section('title', $contact->name )

@section('content')
    {{-- Breadcrumb --}}
    <section class="ph3 ph5-ns pt4 cf w-100 bg-gray-monica">
        <div class="mw7 center">
            <div class="full-page-modal-header ph4 pv3 bt br bl b--gray-monica">
                <ul>
                    <li class="di"><a href="{{ route('people.show', $contact) }}">{{ trans('app.breadcrumb_profile', ['name' => $contact->name]) }}</a></li>
                    <li class="di ph2">></li>
                    <li class="di">{{ trans('people.activity_title') }}</li>
                </ul>
            </div>
        </div>
    </section>

    {{-- Main section --}}
    <section class="ph3 ph5-ns cf w-100 bg-gray-monica mb5">
        <div class="mw8 center full-page-modal pt4">
            <h2 class="tc bb b--gray-monica pb4 mb3 normal">{{ trans('people.activities_profile_title', ['name' => $contact->first_name]) }}</h2>
            <h2 class="tc pt3 pb4 ph3 f4 normal">🚀 {{ trans_choice('people.activities_profile_subtitle', $totalActivities, ['total_activities' => $totalActivities, 'activities_last_twelve_months' => $activitiesLastTwelveMonths, 'name' => $contact->first_name]) }}</h2>
            <div class="cf ph2-ns">

                {{-- Left sidebar --}}
                <div class="fl w-100 w-25-ns pa2">
                    <div class="bg-white">
                        <ul>
                            @foreach($activitiesPerYear as $activityStatistic)
                            <li class="full-page-modal-year-selector pv2 b {{ $year == $activityStatistic->year ? 'selected' : ''  }}">

                                <span class="ph3">
                                    @if ($year != $activityStatistic->year)
                                    <a href="{{ route('people.activities.year', [$contact, $activityStatistic->year]) }}">
                                    @endif

                                    {{ $activityStatistic->year }}

                                    @if ($year != $activityStatistic->year)
                                    </a>
                                    @endif

                                    <span class="fr mr3">{{ $activityStatistic->count }}</span>
                                </span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                {{-- Right Content --}}
                <div class="fl w-100 w-75-ns pa2">
                    <div class="bg-white">
                        <p class="tc b">🤲 {{ trans('people.activities_profile_year_summary_activity_types', ['year' => $year]) }}</p>
                        <ul class="column-list mb4">
                            @foreach($uniqueActivityTypes as $activityType)
                            <li class="mb2 relative tc">
                                <span class="f3">{{ $activityType['occurences'] }}</span>
                                <span class="relative" style="top: -3px;">{{ $activityType['object']->name }}</span>
                            </li>
                            @endforeach
                        </ul>

                        <p class="tc b mb4">{{ trans('people.activities_profile_year_summary', ['year' => $year]) }}</p>

                        {{-- Bar chart --}}
                        <div class="ba b--gray-monica mb5-ns mb6 br2">
                            <ul class="chart-activities">
                                @foreach ($activitiesPerMonthForYear->sortBy('month') as $activityMonth)
                                <li>
                                    <span class="f6" style="height: {{ $activityMonth['percent'] }}%" title="{{ \App\Helpers\DateHelper::getShortMonth(\Carbon\Carbon::create(1990, $activityMonth['month'], 1)) }}"></span>
                                </li>
                                @endforeach
                            </ul>
                        </div>

                        {{-- Details about each month --}}
                        @foreach ($activitiesPerMonthForYear as $activityMonth)
                            @if ($activityMonth['occurences'] != 0)

                                <h3 class="f4">
                                    <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr2">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16 14V15H0V0H1V14H16ZM5 13H3V8H5V13ZM9 13H7V3H9V13ZM13 13H11V6H13V13Z" fill="#4CA35A"/>
                                    </svg>
                                    {{ \App\Helpers\DateHelper::getFullMonthAndDate(\Carbon\Carbon::create($year, $activityMonth['month'])) }} <span class="black-70 f4 normal ml3">{{ trans_choice('people.activities_profile_number_occurences', $activityMonth['occurences'], ['value' => $activityMonth['occurences']]) }}</span>
                                </h3>

                                {{-- Activities list --}}
                                @foreach ($activityMonth['activities'] as $activity)
                                <div class="pl2 bl-ns b--gray-monica">
                                    <div class="pa3-ns pa2 br2 mb3-ns mb2 ml4-ns ml2">
                                        <div class="mb1">
                                            <ul class="mb3 di black-70">
                                                <li class="di relative pr1" style="top:2px">
                                                    <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.6308 1H10.6615V2.5C10.6615 2.78 10.4483 3 10.1769 3H8.23846C7.96708 3 7.75385 2.78 7.75385 2.5V1H4.84615V2.5C4.84615 2.78 4.63292 3 4.36154 3H2.42308C2.15169 3 1.93846 2.78 1.93846 2.5V1H0.969231C0.436154 1 0 1.45 0 2V13C0 13.55 0.436154 14 0.969231 14H11.6308C12.1638 14 12.6 13.55 12.6 13V2C12.6 1.45 12.1638 1 11.6308 1ZM11.6308 13H0.969231V4H11.6308V13ZM3.87692 2H2.90769V0H3.87692V2ZM9.69231 2H8.72308V0H9.69231V2ZM4.84615 6H3.87692V5H4.84615V6ZM6.78461 6H5.81538V5H6.78461V6ZM8.72308 6H7.75385V5H8.72308V6ZM10.6615 6H9.69231V5H10.6615V6ZM2.90769 8H1.93846V7H2.90769V8ZM4.84615 8H3.87692V7H4.84615V8ZM6.78461 8H5.81538V7H6.78461V8ZM8.72308 8H7.75385V7H8.72308V8ZM10.6615 8H9.69231V7H10.6615V8ZM2.90769 10H1.93846V9H2.90769V10ZM4.84615 10H3.87692V9H4.84615V10ZM6.78461 10H5.81538V9H6.78461V10ZM8.72308 10H7.75385V9H8.72308V10ZM10.6615 10H9.69231V9H10.6615V10ZM2.90769 12H1.93846V11H2.90769V12ZM4.84615 12H3.87692V11H4.84615V12ZM6.78461 12H5.81538V11H6.78461V12ZM8.72308 12H7.75385V11H8.72308V12Z" fill="#CDCDCD"/>
                                                    </svg>
                                                </li>
                                                <li class="di f6 pr3">
                                                    {{ \App\Helpers\DateHelper::getShortDate($activity->date_it_happened) }}
                                                </li>
                                                @if (!is_null($activity->type))
                                                <li class="di relative pr1" style="top:1px">
                                                    <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M13 2H7V1C7 0.34 6.69 0 6 0H1C0.45 0 0 0.45 0 1V11C0 11.55 0.45 12 1 12H13C13.55 12 14 11.55 14 11V3C14 2.45 13.55 2 13 2ZM6 2H1V1H6V2Z" fill="#DFDFDF"/>
                                                    </svg>
                                                </li>
                                                <li class="di f6">
                                                    {{ $activity->type->name }}
                                                </li>
                                                @endif
                                            </ul>
                                        </div>
                                        <p class="mb2"><strong>{{ $activity->summary }}</strong></p>
                                        <p class="mb0">{{ $activity->description }}</p>
                                    </div>
                                </div>
                                @endforeach

                            @endif
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection