@extends('layouts.admin.app')

@section('title','User')

@section('sub-title')
{{ ucfirst($user->name) }}
@endsection

@section('css')
    <style>

        .tracking-detail {
            padding:3rem 0
        }
        #tracking {
            margin-bottom:1rem
        }
        [class*=tracking-status-] p {
            margin:0;
            font-size:1.1rem;
            color:#fff;
            text-transform:uppercase;
            text-align:center
        }
        [class*=tracking-status-] {
            padding:1.6rem 0
        }
        .tracking-status-intransit {
            background-color:#65aee0
        }
        .tracking-status-outfordelivery {
            background-color:#f5a551
        }
        .tracking-status-deliveryoffice {
            background-color:#f7dc6f
        }
        .tracking-status-delivered {
            background-color:#4cbb87
        }
        .tracking-status-attemptfail {
            background-color:#b789c7
        }
        .tracking-status-error,.tracking-status-exception {
            background-color:#d26759
        }
        .tracking-status-expired {
            background-color:#616e7d
        }
        .tracking-status-pending {
            background-color:#ccc
        }
        .tracking-status-inforeceived {
            background-color:#214977
        }
        .tracking-list {
            border:1px solid #e5e5e5
        }
        .tracking-item {
            border-left:1px solid #e5e5e5;
            position:relative;
            padding:2rem 1.5rem .5rem 2.5rem;
            font-size:.9rem;
            margin-left:3rem;
            min-height:5rem
        }
        .tracking-item:last-child {
            padding-bottom:4rem
        }
        .tracking-item .tracking-date {
            margin-bottom:.5rem
        }
        .tracking-item .tracking-date span {
            color:#888;
            font-size:85%;
            padding-left:.4rem
        }
        .tracking-item .tracking-content {
            padding:.5rem .8rem;
            background-color:#f4f4f4;
            border-radius:.5rem
        }
        .tracking-item .tracking-content span {
            display:block;
            color:#888;
            font-size:85%
        }
        .tracking-item .tracking-icon {
            line-height:2.6rem;
            position:absolute;
            left:-1.3rem;
            width:2.6rem;
            height:2.6rem;
            text-align:center;
            border-radius:50%;
            font-size:1.1rem;
            background-color:#fff;
            color:#fff
        }
        .tracking-item .tracking-icon.status-sponsored {
            background-color:#f68
        }
        .tracking-item .tracking-icon.status-delivered {
            background-color:#4cbb87
        }
        .tracking-item .tracking-icon.status-outfordelivery {
            background-color:#f5a551
        }
        .tracking-item .tracking-icon.status-deliveryoffice {
            background-color:#f7dc6f
        }
        .tracking-item .tracking-icon.status-attemptfail {
            background-color:#b789c7
        }
        .tracking-item .tracking-icon.status-exception {
            background-color:#d26759
        }
        .tracking-item .tracking-icon.status-inforeceived {
            background-color:#214977
        }
        .tracking-item .tracking-icon.status-intransit {
            color:#e5e5e5;
            border:1px solid #e5e5e5;
            font-size:.6rem
        }
        @media(min-width:992px) {
            .tracking-item {
                margin-left:10rem
            }
            .tracking-item .tracking-date {
                position:absolute;
                left:-10rem;
                width:7.5rem;
                text-align:right
            }
            .tracking-item .tracking-date span {
                display:block
            }
            .tracking-item .tracking-content {
                padding:0;
                background-color:transparent
            }
        }
    </style>
@endsection
@section('content')
    <div class="card mb-3">
        <div class="card-header">
            <i class="fa fa-table"></i> {{ ucfirst($user->name) }} Languages Option & Badges</div>
        <div class="card-body">
            <div class="row">
                @if(isset($languageOptions))
                    @foreach($languageOptions as $option)
                        <div class="card mb-2" style="width: 100%;">
                            <div class="card-header">
                                <span style="font-size: 16px; text-transform: uppercase;" data-toggle="tooltip" data-placement="top" title="{{ getLanguageOptionById($option->language_id) }}">
                                    <strong>{{ getLanguageOptionById($option->language_option_id) }}</strong>
                                </span>
                            </div>
                            <div class="card-body">
                                @if(isset($option->optionBadges) && $option->optionBadges->count() > 0)
                                    @foreach($option->optionBadges as $badge)
                                        <button type="button" class="btn btn-primary mr-2" data-toggle="tooltip" data-placement="top" title="Add required skill badges for your resume on the Build Resume page">
                                            {{ getBadgeById($badge->badge_id) }} <span class="badge badge-info ml-2">{{ "Unverified" }}</span>
                                        </button>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endforeach
                @else
                    {{ 'No Language/Language option added' }}
                @endif
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header">
            <i class="fa fa-table"></i> {{ ucfirst($user->name) }} Work Experience</div>
        <div class="card-body">
            <div class="row">

                <div class="col-md-12 col-lg-12">
                    <div id="tracking-pre"></div>
                    <div id="tracking">
                        <div class="">
                            @if(isset($user->experiences))
                                @foreach($user->experiences as $experience)
                                    <div class="tracking-item">
                                        <div class="tracking-icon status-intransit">
                                            <svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                                <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
                                            </svg>
                                            <!-- <i class="fas fa-circle"></i> -->
                                        </div>
                                        <div class="tracking-date">{{ \Carbon\Carbon::parse($experience->date_from)->format('m, Y') }}<span>{{ \Carbon\Carbon::parse($experience->date_to)->format('m, Y')}}</span></div>
                                        <div class="tracking-content">
                                            <strong>
                                                {{ $experience->role }}
                                            </strong>
                                            <span>
                                                <strong>{{ $experience->company_name }}</strong>, Lagos, Nigeria
                                            </span>
                                            <div>
                                                {!! $experience->job_description !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                {{ 'No Experience added' }}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection