@extends('layouts/eatvio')
@section('page_title', $user->name ." Profile")
@push('css_head')
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
@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">{{ __('profile.consultants') }}</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">{{ __('profile.blog') }}</span>
            </a>

            @if(!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>
                    <p>{{ $user->is_consultant ? __('profile.is_consultant') : __('profile.is_user') }}</p>
                    @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">{{ __('profile.passed_plans') }}:</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">{{ __('profile.easy') }}</td>
                                <td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">{{ __('profile.done') }}</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">{{ __('profile.moderate') }}</td>
                                <td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">{{ __('profile.done') }}</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">{{ __('profile.full') }}</td>
                                <td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-warning">{{ __('profile.in_the_process') }}</small></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="col px-0 --no_wrap flex-grow-1">


                <div class="p-3 --bg_white --shadow --radius --no_wrap">
                    <a href="{{ route('blog_post.create') }}" class="btn btn-lg btn_light --btn_light_color btn-block w-100 --f_bold">{{ __('profile.create_a_post') }}</a>
                </div>

                <div class="h4 my-3 --f_grey">{{ __('profile.all_posts') }}</div>
                @foreach($userPosts as $post)
                <x-profile.blog-post :user="$user" :post="$post" />
                @endforeach

            </div>
        </div>
    </div>
    <script>
        [...document.getElementsByClassName('copy-link')]
        .forEach((element) =>
            element.addEventListener('click', function(event) {
                event.preventDefault();
                const url = element.dataset.linkUrl;
                // console.log(event.target, element.dataset.linkUrl);
                navigator.clipboard.writeText(url);
                alert(`Link "${url}" copied to clipboard!`);
                return false;
            }));
    </script>
</section>
@endsection