@extends('layout.front')
@if ($user->details && ($user->details->first_name != '') && ($user->details->last_name != ''))
    @section('title', "Moj nalog | {$user->details->first_name} {$user->details->last_name}")
@elseif ($user->details && ($user->details->email != '') )
    @section('title', "Moj nalog | {$user->details->email}")
@else
    @section('title', "Moj nalog")
@endif

@section('header-scripts')
    <script src="https://cdn.jwplayer.com/libraries/0a7BVg4u.js"></script>
@endsection

@section('content')
<div class="page-wrapper">

    <!-- Header -->
    @include('front-inc._header-account')

    <!-- section main-container -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main-content -->
                <div class="main-content col-12">

                    <div class="alert alert-light alert-dismissible fade show" role="alert">
                        <p>U toku je prelazak na novu platformu Krojačeve škole. Tokom ovog perioda moguće su sitne tehničke nepravilnosti. Ako ih primetite, molimo vas da nam javite.
                       Ukoliko u svom nalogu ne vidite ranije kupljene kurseve, ulogujte se <a target="_blank" href="https://stari.krojacevaskola.com/korisnik/prijava">OVDE</a></p>
                        <p>Vaša podrška nam pomaže da sve radi savršeno.</p>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                            <!-- close -->
                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.16 311.19">
                                <path d="M106.68,375.18a21.33,21.33,0,0,0,30.17,30.17L256,286.17,375.17,405.33a21.33,21.33,0,1,0,30.17-30.17L286.17,256,405.33,136.82a21.33,21.33,0,0,0-30.17-30.17L256,225.83,136.84,106.67a21.33,21.33,0,1,0-30.17,30.17L225.84,256Z" transform="translate(-100.42 -100.41)"></path>
                            </svg>
                        </button>
                    </div>
                    <!-- alert-notification end -->

                    <!-- user-header -->
                    <div class="user-header">
                        <div class="media">
                            <x-front.user-media-image
                                :user="$user"
                                ></x-front.user-media-image>
                            <!-- media-image end -->
                            <div class="media-body">
                                <h1>{{ $user->details->first_name . ' ' . $user->details->last_name }}</h1>
                                <p>
                                    @if ($user->roles)
                                        <strong>{{ implode(', ', $user->roles) }},</strong>
                                    @endif
                                    {{ $user->details->email }}
                                    <strong>
                                        <a href="{{ route('lms.users.show.courses', [
                                            'lms_user_id' => $user->lms_user_id,
                                            'first_name' => $user->details->first_name ? $user->details->first_name : $user->details->email
                                        ]) }}">pogledajte svoj profil</a></strong></p>
                                <p class="text-light">Na ovoj strani možete unositi, menjati, preuzimati podatke o aktivnostima na platformi </p>
                            </div>
                            <!-- media-body end  -->
                        </div>
                        <!-- media end -->
                    </div>
                    <!-- user-header end -->

                    <div class="row">
                        @if (App\Models\LMSUser::hasRole([1, 2, 9]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.show_users') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Moj tim
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- user-book-hand-drawn-symbol -->
                                        @include('front-inc.svg.user-book-hand-drawn-symbol')
                                    </h2>
                                    <p>Praćenje progresa i upravljanje aktivnostima upisanih korisnika</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif
                        @if (App\Models\LMSUser::hasRole([1, 2, 9]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.top-list') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Top lista
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- award -->
                                        @include('front-inc.svg.award')
                                    </h2>
                                    <p>Pratite progres i uspeh vaših zaposlenih.</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif
                        @if (App\Models\LMSUser::hasRole([1, 2, 9]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.hr.statistics.index') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Statistika
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- library-hand-drawn-books -->
                                        @include('front-inc.svg.library-hand-drawn-books')
                                    </h2>
                                    <p>Statistika korisnika na mesečnom nivou</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif
                        @if (App\Models\LMSUser::hasRole([1, 2, 9]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.hr.settings') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        HR podešavanja
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- user-book-hand-drawn-symbol -->
                                        @include('front-inc.svg.settings-hand-drawn-symbol')
                                    </h2>
                                    <p>Statistika korisnika na mesečnom nivou</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif
                        @if (App\Models\LMSUser::hasRole([1, 2, 9]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.notifications_center.index') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Centar za notifikacije
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- sound-hand-drawn-interface-symbol-of-a-speaker -->
                                        @include('front-inc.svg.sound-hand-drawn-interface-symbol-of-a-speaker')
                                    </h2>
                                    <p>Slanje notifikacija i mailova o novim kursevima, isteku roka, podsetnici Računi </p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif
                        @if (!in_array(config('app.url'), [config('app.wurth_url'), config('app.wurth_url_2')]))
                            @if (App\Models\LMSUser::hasRole([1, 2, 5, 9]))
                                <div class="col-xl-4 col-lg-6">
                                    <div class="user-item-box">
                                        <a href="{{ route('lms.company.payments') }}" class="item-link"></a>
                                        <h2>
                                            <!-- turn-right-arrow -->
                                            @include('front-inc.svg.turn-right-arrow')
                                            Računi
                                            <!-- right-arrow -->
                                            @include('front-inc.svg.right-arrow')
                                            <!-- tax-calculate -->
                                            @include('front-inc.svg.tax-calculate')
                                        </h2>
                                        <p>Pregled i preuzimanje računa, evidencija izvršenih uplata</p>
                                    </div>
                                    <!-- user-item-box end -->
                                </div>
                                <!-- col end -->
                            @endif
                        @endif
                        @if (App\Models\LMSUser::hasRole([1, 2, 9]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.licence_kompanije.index') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Licence kompanije
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- video-player-1 -->
                                        @include('front-inc.svg.video-player-1')
                                    </h2>
                                    <p>Pregled upisanih licenci, tipa pretplate, kurseva, paketa i njihov status</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif
                        @if (App\Models\LMSUser::hasRole([1, 2, 9]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.company-edit') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Podaci kompanije
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- library-hand-drawn-books -->
                                        @include('front-inc.svg.library-hand-drawn-books')
                                    </h2>
                                    <p>Podaci o kompaniji, izmena logotipa, opis</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif

                        <div class="col-xl-4 col-lg-6">
                            <div class="user-item-box">
                                <a href="{{ route('lms.account') }}" class="item-link"></a>
                                <h2>
                                    <!-- turn-right-arrow -->
                                    @include('front-inc.svg.turn-right-arrow')
                                    Lični podaci
                                    <!-- right-arrow -->
                                    @include('front-inc.svg.right-arrow')
                                    <!-- business-man-hand-drawn-outline -->
                                    @include('front-inc.svg.business-man-hand-drawn-outline')
                                </h2>
                                <p>Ovo je i Vaše mesto za učenje. Podaci, lozinka i promena lozinke</p>
                            </div>
                            <!-- user-item-box end -->
                        </div>
                        <!-- col end -->

                        @if (!in_array(config('app.url'), [config('app.wurth_url'), config('app.wurth_url_2')]))
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.moji-sertifikati.index') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Moji sertifikati
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- award-1 -->
                                        @include('front-inc.svg.award-1')
                                    </h2>
                                    <p>Preuzimanje sertifikata</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif

                        @if (App\Models\LMSUser::hasRole([1, 2, 5, 9]) || App\Models\LoggedUser::getFront()->details->is_b2c == 1)
                            <div class="col-xl-4 col-lg-6">
                                <div class="user-item-box">
                                    <a href="{{ route('lms.istorija-placanja') }}" class="item-link"></a>
                                    <h2>
                                        <!-- turn-right-arrow -->
                                        @include('front-inc.svg.turn-right-arrow')
                                        Istorija Plaćanja
                                        <!-- right-arrow -->
                                        @include('front-inc.svg.right-arrow')
                                        <!-- tax-calculate -->
                                        @include('front-inc.svg.tax-calculate')
                                    </h2>
                                    <p>Prikaz svih vaših uplata i datuma aktivacije</p>
                                </div>
                                <!-- user-item-box end -->
                            </div>
                            <!-- col end -->
                        @endif

                        {{-- <div class="col-xl-4 col-lg-6">
                            <div class="user-item-box">
                                <a href="#" class="item-link"></a>
                                <h2>
                                    <!-- turn-right-arrow -->
                                    @include('front-inc.svg.turn-right-arrow')
                                    Sigurnost i prijava
                                    <!-- right-arrow -->
                                    @include('front-inc.svg.right-arrow')
                                    <!-- lightbulb-hand-drawn-symbol -->
                                    @include('front-inc.svg.lightbulb-hand-drawn-symbol')
                                </h2>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
                            </div>
                            <!-- user-item-box end -->
                        </div> --}}
                        <!-- col end -->

                        {{-- <div class="col-xl-4 col-lg-6">
                            <div class="user-item-box">
                                <a href="#" class="item-link"></a>
                                <h2>
                                    <!-- turn-right-arrow -->
                                    @include('front-inc.svg.turn-right-arrow')
                                    Notifikacije
                                    <!-- right-arrow -->
                                    @include('front-inc.svg.right-arrow')
                                    <!-- sound-hand-drawn-interface-symbol-of-a-speaker -->
                                    @include('front-inc.svg.sound-hand-drawn-interface-symbol-of-a-speaker')
                                </h2>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
                            </div>
                            <!-- user-item-box end -->
                        </div> --}}
                        <!-- col end -->

                        <div class="col-12">
                            <div class="deactivate">
                                <p>Iz nekog razloga želite da deaktivirate nalog?</p>
                                <strong>
                                    <a href="#" onclick="return false;" data-bs-toggle="modal" data-bs-target="#deactivate-account-modal">
                                        Kliknite za rastanak (ili nemojte)
                                        <!-- tired -->
                                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path d="M437.64,99.68c-24-30.36-51.25-54.46-81.12-71.63C324.13,9.44,290.31,0,256,0S187.88,9.44,155.48,28.05C125.61,45.22,98.32,69.32,74.36,99.68,27.8,158.69,0,235.07,0,304c0,66.86,26.25,121.43,75.91,157.82C120.72,494.65,183,512,256,512s135.28-17.35,180.09-50.18C485.75,425.43,512,370.86,512,304,512,235.07,484.2,158.69,437.64,99.68Zm-24,106a8,8,0,0,1-11.31,0h0c-26.21-26.22-80.3-8.66-86.38-6.57a9,9,0,0,1-11.9-9C305.64,161.22,341.87,144,376,144a8,8,0,0,1,0,16c-22.7,0-43.16,8.46-51.74,20,22.43-5.5,64-11,89.39,14.31a8,8,0,0,1,0,11.31Zm-105-124.92a8,8,0,0,1,10.62,3.91h0C329.94,107.77,352.13,112,392,112a8,8,0,0,1,0,16c-37.07,0-71.64-2.8-87.26-36.65a8,8,0,0,1,3.91-10.62ZM120,112c39.87,0,62.06-4.23,72.74-27.35a8,8,0,0,1,14.53,6.71C191.64,125.2,157.07,128,120,128a8,8,0,0,1,0-16ZM98.38,194.34c25.34-25.34,67-19.81,89.39-14.31-8.58-11.58-29-20-51.74-20a8,8,0,0,1,0-16c34.09,0,70.32,17.22,71.94,46a9,9,0,0,1-11.9,9c-6.09-2.08-60.17-19.65-86.39,6.57a8,8,0,0,1-11.31-11.31ZM32,248a24,24,0,1,1,24,24A24,24,0,0,1,32,248ZM456.08,386.57A33.38,33.38,0,0,1,420,398.37,608.63,608.63,0,0,0,255.69,376c-72.43,0-131.08,12.73-167.54,23.41a34.6,34.6,0,0,1-9.73,1.41,34.08,34.08,0,0,1-30.36-48.9C59.4,328.33,80.73,294.46,118,267c38.73-28.53,85-43,137.69-43,46.22,0,89.27,14,128,41.66,29.64,21.17,56.26,50.59,75,82.84A33.56,33.56,0,0,1,456.08,386.57ZM456,272a24,24,0,1,1,24-24A24,24,0,0,1,456,272Z"/>
                                        </svg>
                                    </a>
                                </strong>
                            </div>
                        </div>

                    </div>
                    <!-- row end -->

                </div>
                <!-- main-content end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->

    </section>
    <!-- main-container end -->

    {{-- @include('front.user.partials.profile._video-tutorial') --}}


    @include('front.user.partials.profile._modal-deactivate-account')

    <!-- Footer -->
    @include('front-inc._footer')

</div>
<!--- page-wrapper end -->
@endsection
@section('add-scripts')
    <script type="text/javascript">
        // jwplayer("myElement").setup({
        //     "playlist": [{
        //             "file": `https://player.vimeo.com/external/654849552.sd.mp4?s=611c8818e9293eec35df923764fff983ed66b0a4&profile_id=165&oauth_token_id=1543956095`
        //         }]
        // });

        // (function() {
        //     const videoTutorialElement = document.getElementById('button-video-tutorial');
        //     const showVideoContent = localStorage.getItem(`hide_video_tutorial_${videoTutorialElement.dataset.user_id}`, 1);

        //     if(+showVideoContent == 1) {
        //         return;
        //     }

        //     document.getElementById('video-tutorial').classList.remove('d-none');

        // })();

        // document.getElementById('button-video-tutorial').addEventListener('click', (e) => {
        //     document.getElementById('video-tutorial').classList.add('d-none');
        //     localStorage.setItem(`hide_video_tutorial_${e.currentTarget.dataset.user_id}`, 1);
        // })
    </script>
@endsection