@extends('layouts.profile')

@section('profile_content')

<h3 class="mt-5">{{ __('dashboard.history.label') }}</h3>


<div style="min-height: 200px; padding-top: 1.675rem;">

    @php $showInitially = true; @endphp

    @forelse ( (array)$latestHistory as $history )

        @php $showInitially = $history['showInitially']; @endphp

        <div class="container {!! $history['showInitially'] ? '' : 'hide-initially d-none' !!} history">
            <div class="row d-flex justify-content-between mb-3">
                <div class="col-*-* d-flex align-items-center py-3">
                    <img src="{{ $history['iconURL'] }}" class="img-fluid" width="32px" height="32px">
                </div>
                <div class="col d-flex align-items-center">
                    <div class="container">
                        <div class="row col font-family-montserrat">
                            {{ $history['title'] }}
                        </div>
                        <div class="row col font-family-catamaran font-size-12">
                            <span>{{ __('dashboard.history.contractName') }}:&nbsp;</span><span class="font-weight-bold">{{ $history['contractName'] }}</span>
                        </div>
                    </div>
                </div>
                <div class="col d-flex align-items-center justify-content-end m-0 p-0">
                    <div class="col d-flex align-items-center justify-content-end">
                        <div class="container m-0 p-0">
                            <div class="row col d-flex justify-content-end m-0 p-0 content-dashboard-url font-family-catamaran font-size-12 font-weight-bold">
                                {{ $history['date'] }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @empty
        {{ __('dashboard.history.noHistory') }}
    @endforelse

    @if(!empty($latestHistory) && !$showInitially)
        <div id="showMore" class="show-link pointer">{{ __('dashboard.contracts.showAllContracts') }}<i class="fas fa-caret-down"></i></div>
        <div id="hideSome" class="show-link pointer d-none">{{ __('dashboard.contracts.hideAllContracts') }}<i class="fas fa-caret-up"></i></div>
    @endif

</div>

@endsection

@section('title')
{{ __('meta.title.history') }}
@endsection

@section('description')
{{ __('meta.description.history') }}
@endsection

@push('scripts')
<script>
    $( document ).ready(function() {
        if ($(window).width() < 576) {
            $('html, body').animate({
                scrollTop: $("h3").offset().top
            }, 1500);
        }
    });
</script>
@endpush