@extends('layouts/eatvio')
@section('page_title', $user->name ." Profile")
@push('css_head')
  <script src="https://cdn.tailwindcss.com"></script>
    <link type="text/css"  rel="stylesheet" href="/css/bootstrap.min.css" />
@endpush

@section('main_section')
<section class="py-5" id="main">
    <div class="container d-flex justify-content-between align-items-center mb-5 px-4 py-4 --bg_white --shadow --radius --mw-1000">
        <a href="{{ route('consultants.index') }}" class="d-flex align-items-center --f_bold --f_main">
            <svg width="17" height="16" class="me-2">
                <use xlink:href="#GoBack"></use>
            </svg>
            <span class="d-none d-md-inline">Консультанты</span>
        </a>
        <div class="d-flex align-items-center">
            <a href="{{ route('blog_post.index', ['author' => $user->id]) }}" class="d-flex align-items-center me-4 --f_bold --f_main">
                <svg width="24" height="24" class="me-2">
                    <use xlink:href="#Blog"></use>
                </svg>
                <span class="d-none d-md-inline">Блог</span>
            </a>
            @if($user->id != auth()->user()->id)
            <a href="{{ route('chat.show', $user->id ) }}" class="btn btn-lg btn-primary btn-block w-100 ps-4 pe-sm-5 --f_bold" target="_blank">
                <svg width="20" height="20" class="me-3"><use xlink:href="#WhiteChat"></use></svg>
                НАПИСАТЬ
            </a>
            @endif
            @if($user->id == auth()->user()->id && !is_null($user->detailz))
            <a href="{{ route('user_detailz.show', ['user_detailz' => $user->detailz]) }}" class="d-flex align-items-center --f_bold --f_main">
                <svg width="24" height="24" class="me-2">
                    <use xlink:href="#Settings"></use>
                </svg>
                <span class="d-none d-md-inline">{{ __('profile.settings') }}</span>
            </a>
            @endif

        </div>
    </div>

    <div class="container mb-4 --mw-1000">
        <div class="row justify-content-between flex-lg-nowrap">
            <div class="col-lg-8 d-flex justify-content-between flex-column flex-sm-row me-lg-4 mb-4 mb-lg-0 px-3 py-4 --bg_white --shadow --radius --no_wrap">
                @livewire('profile.photo-form', ['user' => $user])
                <div class="flex-grow-1 --no_wrap_normal">
                    <div class="h3 --f_bold">{{ $user->name }}</div>
                    @livewire('profile.description-form', ['user' => $user])
                </div>
            </div>
            <div class="col px-4 px-lg-5 py-4 --bg_white --shadow --radius --no_wrap flex-grow-1">
                <nav class="nav flex-column --menu_icons ps-4">
                    <div>
                        <i class="--f_blue --f_bold fs-5">3</i>
                        <span class="nav-item">{{ __('profile.plans_passed') }}</span>
                    </div>
                    <div>
                        <i class="--f_blue --f_bold fs-5">{{ $user->author_of_blog_post()->distinct()->where('state', 'active')->count() }}</i>
                        <span class="nav-item">{{ __('profile.blog_posts') }}</span>
                    </div>
                    <div>
                        <svg width="20" height="15">
                            <use xlink:href="#Eye"></use>
                        </svg>
                        <span class="nav-item">{{ __('profile.views') }}: {{ $profileViewsCount}}</span>
                    </div>
                    <div>
                        <svg width="17" height="14">
                            <use xlink:href="#Heart"></use>
                        </svg>
                        <span class="nav-item">{{ __('profile.likes') }}: {{ $totalLikes }}</span>
                    </div>
                </nav>
            </div>
        </div>
    </div>


    <div class="container mb-3 --mw-1000">
        <div class="row justify-content-between flex-lg-nowrap --mw-1000">
            <div class="col-lg-6 px-0 me-lg-4">
                @livewire('profile.circumference-chart', ['user' => $user])
                @livewire('profile.weight-chart', ['user' => $user])

                <div class="mb-4 p-3 --bg_white --shadow --radius --no_wrap">
                    <div class="h5">Пройденные планы:</div>
                    <hr />
                    <table class="table --table_blue mb-0 fs-4_5 --f_bold">
                        <tbody>
                            <tr>
                                <td><img src="/img/plan_1.png" class="--radius_100" width="26px" height="26px" /></td>
                                <td class="w-50 text-start ps-0">Лёгкий</td>
                                <td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">Готов</small></td>
                            </tr>
                            <tr>
                                <td><img src="/img/plan_2.png" class="--radius_100" width="26px" height="26px" /></td>
                                <td class="w-50 text-start ps-0">Умеренный</td>
                                <td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">Готов</small></td>
                            </tr>
                            <tr>
                                <td><img src="/img/plan_3.png" class="--radius_100" width="26px" height="26px" /></td>
                                <td class="w-50 text-start ps-0">Полный</td>
                                <td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-warning">В процессе</small></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="col px-0 --no_wrap flex-grow-1">
                <div class="h4 my-3 --f_grey">
                    <a class="text-black" href="{{ route('blog_post.index', ['author' => $user->id]) }}">{{ __('profile.all_posts') }}</a>
                </div>
                @foreach($userPosts as $post)
                <x-profile.blog-post :user="$user" :post="$post" />
                @endforeach

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

</section>
@endsection