@extends('adminlte::page')

@section('title', config('app.name') . ' | ' . __('messages.profile.profile'))

@section('content_header')

    <h4>{{__('messages.reusable.profile')}} / {{__('messages.reusable.settings')}}</h4>

@stop

@section('css')

    <link rel="stylesheet" href="/css/profile.css">

@stop

@section('js')

    @if (session()->has('success'))

        <script>
            toastr.success("{{session('success')}}")
        </script>

    @elseif(session()->has('error'))

        <script>
            toastr.error("{{session('error')}}")
        </script>

    @endif

@stop

@section('content')


    <div class="row">

        <div class="col">

        </div>

        <div class="col">

            <div class="card card-primary card-outline">
                <div class="card-body box-profile">
                    <div class="text-center">
                        @if($profile->avatarPreference == 'gravatar')
                            <img class="profile-user-img img-fluid img-circle" src="https://gravatar.com/avatar/{{md5(Auth::user()->email)}}" alt="User profile picture">
                        @else
                            <img class="profile-user-img img-fluid img-circle" src="https://crafatar.com/avatars/{{Auth::user()->uuid}}" alt="User profile picture">
                        @endif
                    </div>

                    <h3 class="profile-username text-center">{{Auth::user()->name}}</h3>

                    <p class="text-muted text-center">{{$profile->profileShortBio}}</p>

                    <div class="text-center">

                        <button type="button" class="btn btn-sm btn-success" onclick="window.location.href='{{route('showSingleProfile', ['user' => Auth::user()->id])}}'"><i class="fas fa-eye"></i></button>

                    </div>
                </div>

                <div class="card-footer text-center">

                    <a href="https://github.com/{{$github}}" class="pr-2 pl-2"><i class="fab fa-github fa-2x"></i></a>
                    <a href="#" onclick="toastr.info('{{__('messages.profile.discord_tag', ['discordTag' => $discord])}}')" class="pr-2 pl-2"><i class="fab fa-discord fa-2x"></i></a>
                    <a href="https://twitter.com/{{$twitter}}" class="pr-2 pl-2"><i class="fab fa-twitter fa-2x"></i></a>
                    <a href="https://instagram.com/{{$insta}}" class="pr-2 pl-2"><i class="fab fa-instagram fa-2x"></i></a>

                </div>

                <!-- /.card-body -->
            </div>

        </div>


        <div class="col">


        </div>

    </div>


   <form method="POST" action="{{route('saveProfileSettings')}}" id="saveProfileSettings">

       @method('PATCH')
       @csrf

       <div class="row mt-3">

           <div class="col">

               <div class="card">

                   <div class="card-header">

                       <div class="card-title"><h3>{{__('messages.profile.basic_info')}}</h3></div>

                   </div>

                   <div class="card-body">

                       <div class="row">

                           <div class="col">

                               <label for="firstName">{{__('messages.profile.fl_name')}}</label>
                               <input disabled type="text" class="form-control" id="firstName" value="{{Auth::user()->name}}">

                           </div>

                       </div>

                       <div class="form-group mt-3">

                           <label for="shortBio">{{__('messages.profile.shortbio')}}</label>
                           <input  type="text" name="shortBio" id="shortBio" class="form-control" value="{{$profile->profileShortBio}}">

                       </div>

                       <div class="form-group mt-3">

                           <label for="aboutMe">{{__('messages.profile.about_me')}}</label>
                           <textarea name="aboutMe" id="aboutMe" rows="8" class="form-control">{{$profile->profileAboutMe}}</textarea>
                           <p class="text-muted"><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">{{__('messages.vacancy.markdown')}}</a></p>

                       </div>

                   </div>

               </div>

           </div>

           <div class="col">

                <div class="card">

                    <div class="card-header">
                        <div class="card-title"><h3>{{__('messages.profile.pref_media')}}</h3></div>
                    </div>

                    <div class="card-body">

                        <label>{{__('messages.profile.avatar_source')}} </label>

                        <div class="form-group mb-3">

                            <label>
                                <input type="radio" name="avatarPref" value="MOJANG" {{($profile->avatarPreference == 'crafatar') ? 'checked' : ''}}>
                                <img alt="Mojang Logo (Minecraft)" height="150px" width="150px" src="data:image/svg+xml;utf8;base64, ">
                            </label>

                            <label>
                                <input type="radio" name="avatarPref" value="GRAVATAR" {{($profile->avatarPreference == 'gravatar') ? 'checked' : ''}}>
                                <img alt="Gravatar logo" src="/img/gravatar.png">
                            </label>

                        </div>

                        <label>{{__('messages.profile.social_media')}}</label>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fab fa-github"></i></span>
                            </div>
                            <input name="socialGithub" type="text" class="form-control" placeholder="{{__('messages.profile.github_user')}}" value="{{$github}}">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fab fa-discord"></i></span>
                            </div>
                            <input name="socialDiscord" type="text" class="form-control" placeholder="{{__('messages.profile.discord_user')}}" value="{{$discord}}">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fab fa-twitter"></i></span>
                            </div>
                            <input name="socialTwitter" type="text" class="form-control" placeholder="{{__('messages.profile.twitter_user')}}" value="{{$twitter}}">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fab fa-instagram"></i></span>
                            </div>
                            <input name="socialInsta" type="text" class="form-control" placeholder="{{__('messages.profile.insta_user')}}" value="{{$insta}}">
                        </div>

                    </div>

                </div>

           </div>

       </div>

       <div class="row mt-3">

           <div class="col text-center">

               <button type="button" class="btn btn-success" onclick="document.getElementById('saveProfileSettings').submit()">{{__('messages.profile.update_prfl')}}</button>

           </div>

       </div>

   </form>

@stop
@section('footer')
    @include('breadcrumbs.dashboard.footer')
@stop
