@php
$admin = 0;
$mod = 0;
$isModOrHigher = false;
$isDeveloperOrHigher = false;
$council = 0;
if($myUser != null){
    $admin = $myUser->isAdmin();
    $mod = $myUser->isMod();
    $isModOrHigher = $myUser->isMod(true);
    $isDeveloperOrHigher = $myUser->isDeveloper(true);
    $council = $myUser->isCouncil();
}
@endphp

<!DOCTYPE html>
<html lang="en" style="min-height: 100%;">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta property="og:locale" content="en_US">
	<meta property="og:type" content="website">
    {{-- This is the new embed for profiles --}}
    <meta property="og:title" content="{{ $user->username }}">
    <meta property="og:image" content="https://{{env('CDN_DOMAIN')}}/profile_pic/{{ $user->profile_pic != null ? $user->profile_pic : 'default.jpg'}}">
    <meta property="og:site_name" content="Doxbin"> 
	<meta property="og:description" content="{{ strip_tags($user->getBioHtml()) }}">

    <link rel="stylesheet" href="/legacy/index.css">
    @include('_scripts')
	
    <title>{{ $user->username }}'s Profile - Doxbin</title>
    <style>
    .info-cont{
        margin: 4px 0 15px 0;
        font-size: 13px;
    }
    .info-cont p{
        margin: 0;
        line-height: 16px;
    }
    .info-cont p b{
        margin-right: 6px;
    }
    .admin-text{
        color: red;
        font-weight: bold;
    }
    .profile-cont{
        margin-top: 60px;
        /* margin-bottom removed due to it looking very bad. Reiko, Mar 16th 2024 */
        padding-top: 1px;
    }
    .gray{
        color: #bfbfbf;
        margin-top: 5px;
    }
    .admin-text{
        color: red;
        font-weight: bold;
    }
    .profile-img{
        float: left;
        width: 120px;
        height: 120px;
        background-color: gray;
        margin-right: 10px;
        -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
        box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
        border-radius: 2px;
    }
    .button{
        line-height: 1.2;
        color: white;
        background: #b21c1c;
        border: 0;
        border-radius: 2px;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        outline: none;
        padding: 5px 5px 3px 5px;
        vertical-align: top;
        margin-top: 8px;
    }
    .button:hover{
        text-decoration: none;
        color: white;
		background: #8c1c1c;
    }
    .follow-button{
        display: inline-block;
        padding: 5px 8px;
        border: solid 1px #00ff00;
        background-color: #272727;
        color: white;
        border-radius: 2px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: bold;
        
        margin-top: 42px;
        float: right;
    }

    .follow-button:hover{
        text-decoration: none;
        color: white;
        background-color: #1D1D1D;
    }

    .follow-button:focus{
        color: white;
        text-decoration: none;
    }

    .admin-dropdown-btn{
        color: white;
        font-size: 25px;
        right: 0;
        position: absolute;
    }
    div.uinfo{
        margin-bottom:20px;
    }
    .uinfo .uinfo-row{
        text-align: right;
        color: #bfbfbf;
        padding: 4px;
        font-size: 13px;
        border-bottom: 1px solid #282828;
    }
    .uinfo .uinfo-h{
        text-align: left;
        font-weight: bold;
        float:left;
    }
    .uinfo .uinfo-i{
        
    }
    div.pastes{
        margin-left: 0px;
        padding: 0 15px;
    }
    
    div.profile-padding{
        padding: 0 15px;
        position:relative;
    }

    .edituser{
        margin-top: 0px;
        right:15px;
        position:absolute;
    }
    .profile-comments{
        width: 100%;
    }
    .profile-comment-create{
        background-color: #1c1c1c;
        border: solid 1px #282828;
        border-radius: 3px;
        padding: 3px;
        width: 100%;
    }
    .profile-comment-create:focus{
        outline:none;
    }
    .profile-comments .profile-comment{
        text-align: right;
        color: #bfbfbf;
        padding: 4px;
        font-size: 13px;
        border-bottom: 1px solid #282828;
    }
    .profile-comments .profile-comment-username{
        text-align: left;
        font-weight: bold;
        float:left;
    }
    .profile-comment:last-of-type{
        border-bottom: none;
    }
    .pastes-section{
        width: 70%;
    }
    .info-section{
        width: 30%;
    }
    .profile-split{
        display: flex
    }

    @media only screen and (max-width: 992px){
        div.rcta{
            border-left: none;
            padding-top: 10px;
            padding: 0;
            float: none;
        }
        div.uinfo{
            border-right: none;
            padding-top: 10px;
            padding: 0;
        }
        div.pastes{
            padding: 0;
            border: none;
        }
        .edituser{
            right: 0;
        }
        div.profile-padding{
            padding: 0;
        }
        div.pastes-section{
            width:100%;
        }
        div.info-section{
            width:100%;
        }
        .profile-split{
            display: block;
        }
    }

    .delete-comments-button{
        display: inline-block;
        padding: 2px 5px;
        background-color: rgb(80, 12, 12);
        border: solid 1px rgb(114, 58, 58);
        border-radius: 2px;
        color: white;
        vertical-align: middle;
        cursor: pointer;
    }
    .delete-comments-button.delete-smaller{
        padding: 0;
        margin-left:7px;
        display:none;
        border:none;
        background:none;
        color:red;
        vertical-align: top;
    }
    .delete-comments-button:hover{
        color: white;
        background-color: rgb(61, 13, 13);
    }
    .delete-comments-button:focus{
        color: white;
    }
    .delete-comments-button i{
        font-size: 15px;
        vertical-align: text-top;
    }

    </style>
    {{-- <link rel="stylesheet" href="/legacy/profile.css"> --}}
</head>

<body class="bin" style="min-height: 100vh;">

    <div id="captcha" style="height: 130px; width: 318px;position:fixed; top: 50%; left: 50%;margin: -80px 0 0 -151px;z-index: 10;display: none;padding:8px; background-color: rgba(40, 40, 40, 0.8);text-align:center;">
		@include('layouts.captcha')
        <a href="#" class="button button-green" id="submit-comment">Comment</a>
    </div>

{!! csrf_field() !!}
    @include('_nav')
    <div class="container" style="background-color: #111111; min-height: 100vh;border: 1px #282828;border-style: none solid;padding-bottom: 20px;">
        <div class="profile-cont" style="position:relative;">
			
			<!-- Start Banner -->
			@if($user->banner_pic != null)
			<div style="background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(0, 0, 0, 0.7)), url('https://{{env('CDN_DOMAIN')}}/banner_pic/{{ $user->banner_pic}}') no-repeat center; background-size: cover; margin-top: -15px;"> 
			@endif
            {{-- 
                This @if($user->banner_pic != null) padding-top: 10px !important; @endif has
                been implemented as it decides to add a top padding regardless of if a banner
                exists or not. I have fixed this.    
            --}}
            <div class="profile-padding" @if($user->banner_pic != null)style="padding-top: 10px !important;"@endif> <!-- Implement the style tag only when the banner is there -->				
                <div class="profile-img">
                    <img style="height: 120px; width: 120px;" src="https://{{env('CDN_DOMAIN')}}/profile_pic/{{ $user->profile_pic != null ? $user->profile_pic : 'default.jpg'}}" >
                </div>
            <h5 class="gray" style="font-size: 24px; margin: 0px 20px 0px 2px; padding-top: 0px; display: inline-block;{!! $user->getNameStyle('#bfbfbf') !!}">
                {{ $user->username }}
                {!! $user->getRankHtml() !!}
            </h5>
            @if($myUser != null && $myUser->id != $user->id)
                <a class="follow-button" href="#">{{  $isFollowing == 1 ? 'Unfollow' : 'Follow' }}</a>
            @endif

            @if($isDeveloperOrHigher)
                <a class="button edituser" href="/user/{{ $user->username }}/edit">Manage</a>
            @endif
        </div>
        <div class="info-cont">
            
            <p style="font-size: 15px; min-height: 87px;">
                {!! $user->getBioHtml() !!}
            </p>
            
        </div>
        <hr style="margin: 15px 0;">
			</div>
            <div class="profile-split">
                <div class="pastes-section">
                    @if ($pastes->where('hidden', 0)->count() > 0 || (($isDeveloperOrHigher) && count($pastes) > 0))
                    <div class="pastes" style="height: 100%;">
                        <h5 class="gray" style="font-size: 16px;"><b>{{ $user->username }}'s Pastes <a href="/user/{{ $user->username }}/pastes">(View All)</a></b></h5>
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th colspan="3">Title</th>
                                    <th class="text-center">Comments</th>
                                    <th class="text-center">Views</th>
                                    <th class="text-center r-hide">Added</th>
                                    @if ($admin == 1)
                                    <th class="text-center" style="color: red;">Admin</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
            @foreach ($pastes as $paste)
                @if($paste->private)
                    @if(is_null($myUser) || $myUser->id != $paste->created_by && !$isDeveloperOrHigher)
                        @continue
                    @endif
                @endif                
                {{-- 
                    rewrote code to help users see their own pastes, dev+ can see, and everyone see public pastes
                    pretty much if the conditions are met, the paste shows up 
                    non-loggined in users cannot see. users logged in up to council cannot see. 
                    users who own the paste can see
                    - Reiko, Mar 20th 2024.
                --}}

                @if (($myUser && $myUser->id == $paste->created_by) || $isDeveloperOrHigher || (!$paste->hidden && !$paste->unlisted))
                
                                <tr class="doxentry {{ $council && ($paste->flagged == 1 || $paste->flagged == 2 && ($paste->last_edited == null || $paste->last_edited < $paste->flagdate)) ? 'hidden-post' : '' }}{{ $paste->hidden == 1 ? 'hidden-post' : '' }}" id="{{$paste->id}}">
                                    <td colspan="3" style="overflow: hidden;text-overflow: ellipsis;">
                                    <a title="{{ $paste->title }}" href="https://{{$currentDomain}}/upload/{{$paste->link}}">{!! $paste->getIcons() !!}{{$paste->title}}</a>
                                    </td>
                                    <td style="width: 105px;" class="text-center">
                                        {{  $paste->disable_cmts == 1 ? '-' : $paste->comments   }}
                                    </td>
                                    <td class="text-center">
                                        {{$paste->views}}
                                    </td>
                                    <td style="width: 120px" class="text-center r-hide">{{$paste->created_at->format('M jS, Y')}}</td>
                    @if ($isDeveloperOrHigher)
                                    <td class="text-center admin-select">
                                        <a id="hide{{$paste->id}}" onclick="removePaste({{$paste->id}})" style="color:red;" href="javascript:void(0)">{{ ($paste->hidden == 1 ? 'Unhide' : 'Hide') }}</a>
                                    </td>
                    @endif
                            </tr>
                @endif
            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <div class="col-md-9" style="margin-left: 0; padding: 0;">
                        <h5 class="gray" style="font-size: 15px;">{{$user->username}} has no pastes.</h5>
                        </div>
                    @endif
                </div>
                
                <div class="info-section">
                    <div class="uinfo">
                        <h5 class="gray" style="font-size: 16px;"><b>Information</b></h5>
                        <div class="uinfo-row">
                            <div class="uinfo-h">User ID</div><div class="uinfo-i">{{ $user->id }}</div>
                        </div>
                        <div class="uinfo-row">
                            <div class="uinfo-h">Joined</div><div class="uinfo-i">{{age($user->joindate)}}</div>
                        </div>
                        <a href="/user/{{$user->username}}/pastes">
                            <div class="uinfo-row">
                                <div class="uinfo-h">Pastes</div><div class="uinfo-i">{{ $pasteCount }}</div>
                            </div>
                        </a>
                        <div class="uinfo-row">
                            <div class="uinfo-h">Comments</div><div class="uinfo-i">{{ $commentCount }}</div>
                        </div>
                        <a href="/user/{{$user->username}}/following">
                            <div class="uinfo-row">
                                <div class="uinfo-h">Following</div><div class="uinfo-i">{{ $user->following }}</div>
                            </div>
                        </a>
                        <a href="/user/{{$user->username}}/followers">
                            <div class="uinfo-row">
                                <div class="uinfo-h">Followers</div><div class="uinfo-i" id="followers">{{ $user->followers }}</div>
                            </div>
                        </a>
                        <div class="uinfo-row">
                            <div class="uinfo-h">Likes Given</div><div class="uinfo-i" id="followers">{{ $user->likes_given }}</div>
                        </div>
                        <div class="uinfo-row">
                            <div class="uinfo-h">Likes Received</div><div class="uinfo-i" id="followers">{{ $user->likes_received }}</div>
                        </div>
                    </div>

                    <div class="rcta profile-comments" style="margin-bottom:20px;">
                        <h5 class="gray" style="font-size: 16px;display: inline-block;margin-top:4px;"><b>Comments</b></h5>@if(!is_null($myUser) && $isDeveloperOrHigher)<div style="float: right;"><a href="#" class="delete-comments-button" id="switch-comments-button" title="Delete profile comments"><i class="material-icons">close</i></a></div>@endif
                        <div class="comments-section">
                    @foreach($profileComments as $comment)
                    @php
                    if($comment->created_by == 0){
                        $commentUser = null;
                    }else{
                        $commentUser = new App\User();
                        $commentUser->fill([
                            'id' => $comment->uid,
                            'username' => $comment->username,
                            'name_color' => $comment->name_color,
                            'name_css' => $comment->name_css,
                            'role' => $comment->role,
                            'council' => $comment->council,
                            'is_developer' => $comment->is_developer, // Added this so rank appears for 'Developer' role
                            'mod' => $comment->mod,
                            'is_manager' => $comment->is_manager, // Added this so rank appears for 'Manager' role
                            'admin' => $comment->admin
                            ]);
                    }
                    @endphp
                            <div class="profile-comment" title="{{ Carbon\Carbon::parse($comment->created_at)->format('Y-m-d H:i') }}">
                                <div class="profile-comment-username">{!! $commentUser->getNameHtml(true, true, '', '') !!}</div>
                                <div class="profile-comment-content">{{ $comment->content }}<a href="#" class="delete-comments-button delete-smaller" title="Delete comment" id="{{$comment->id}}"><i class="material-icons">close</i></a></div>
                            </div>
                    @endforeach
                        </div>
                    @if(!is_null($myUser))
                        <input type="text" class="profile-comment-create">
                        <a class="button button-green" href="#" id="add-profile-comment" style="margin-top: 5px;">Comment</a>
                        <p style="color: red;" id="comment-error"></p>
                    @endif
                    </div>

                    <div class="rcta">
                        <h5 class="gray" style="font-size: 16px;"><b>Recent Activity</b></h5>
                    @if(count($recentActivity) < 1)
                        <p class="gray">No recent activity</p>
                    @else
                        @php
                            $v = false;
                        @endphp
                        @foreach ($recentActivity as $activity)
                            @php
                            $dox = App\Paste::where('id', $activity->doxId)->first();
                            @endphp
                            @if(is_null($dox) || $dox->hidden)
                                @continue
                            @endif
                            @php
                            $v = true;
                            @endphp
                            <p class="gray" style="font-size: 13px; padding-left: 3px;margin-bottom: 5px;"><b>{{ age($activity->date)}}</b><br>Commented on @if ($dox->hidden == 0)<a href="/upload/{{ $dox->link }}">{{$dox->title}}</a>@else [deleted] @endif</p>
                            <hr style="margin: 5px 0px;">
                        @endforeach
                        @if($v = false)
                        <p class="gray">No recent activity</p>
                        @endif
                    @endif
                    </div>
                </div>
        </div>
    </div>
    
    @include('layouts.captchascript')
    @if($myUser != null)
    <script>
    var isFollowing = {{ $isFollowing }};
    var followers = {{ $user->followers }};
    $('.follow-button').on('click', function(e){
        $.post('/api/follow-user', {
            _token: $('input[name=_token]').val(),
            uid: {{ $user->id }}
        }, function(resp){
            if(resp.status == "done"){
                if(isFollowing != resp.following){
                    if(resp.following == 1){
                        followers++;
                        $('.follow-button').text('Unfollow');
                        isFollowing = 1;
                    }else{
                        followers--;
                        $('.follow-button').text('Follow');
                        isFollowing = 0;
                    }
                    $('#followers').text(followers);
                }
            }else if(resp.status == "err"){
                alert(resp.msg);
            }
        });
        e.preventDefault();
    });

    var delete_shown = false;
    $('#switch-comments-button').on('click', function(e){
        if(delete_shown){
            $('.delete-comments-button.delete-smaller').hide();
        }else{
            $('.delete-comments-button.delete-smaller').show();
        }
        delete_shown = !delete_shown;
        e.preventDefault();
    });

    $('.delete-smaller').on('click', function(e){
        var id = $(this).attr('id');
        $.post('/admin/api/delete-profile-comment', {
            _token: $('input[name=_token]').val(),
            cid: id
        }, function(resp){
            if(resp.status == 'done'){
                $(`#${id}`).parent().parent().remove();
            }
        });
        e.preventDefault();
    });

    $('#add-profile-comment').on('click', function(e){
        $('#captcha').show();
        e.preventDefault();
    });

    @if(env('CAPTCHA') == 'HCAPTCHA')
        $('#submit-comment').on('click', function(e){
            var comment = $('.profile-comment-create').val();
            $.post('/user/{{ $user->username }}/comment', {
                _token: $('input[name=_token]').val(),
                comment: comment,
                hcaptcha_token: $('[name=h-captcha-response]').val()
            }, function(resp){
                if(resp.status == 'done'){
                    $('.comments-section').prepend('<div class="profile-comment">' +
                        '<div class="profile-comment-username">' + resp.username + '</div>' + 
                        '<div class="profile-comment-content">' + $('<div>').text(comment).html() + '</div>' + // Utilzing .text() to safely set text, .html() to convert back to string
                    '</div>');
                    $('.profile-comment-create').val('');

                }else{
                    $('#comment-error').text(resp.msg);
                }
                $('#captcha').hide();
            });
            e.preventDefault();
        });
    @elseif(env('CAPTCHA') == 'RECAPTCHA') {{-- no clue why this wasn't done sooner lol --}}
        $('#submit-comment').on('click', function(e){
            var comment = $('.profile-comment-create').val();
            $.post('/user/{{ $user->username }}/comment', {
                _token: $('input[name=_token]').val(),
                comment: comment,
                recaptcha_token: grecaptcha.getResponse()
            }, function(resp){
                if(resp.status == 'done'){
                    $('.comments-section').prepend('<div class="profile-comment">' +
                        '<div class="profile-comment-username">' + resp.username + '</div>' + 
                        '<div class="profile-comment-content">' + $('<div>').text(comment).html() + '</div>' + // Utilzing .text() to safely set text, .html() to convert back to string
                    '</div>');
                    $('.profile-comment-create').val('');

                }else{
                    $('#comment-error').text(resp.msg);
                }
                $('#captcha').hide();
            });
            e.preventDefault();
        });
        @elseif(env('CAPTCHA') == 'TURNSTILE')
        $('#submit-comment').on('click', function(e){
            var comment = $('.profile-comment-create').val();
            $.post('/user/{{ $user->username }}/comment', {
                _token: $('input[name=_token]').val(),
                comment: comment,
                turnstile_token: $('[name=cf-turnstile-response]').val(),
            }, function(resp){
                if(resp.status == 'done'){
                    $('.comments-section').prepend('<div class="profile-comment">' +
                        '<div class="profile-comment-username">' + resp.username + '</div>' + 
                        '<div class="profile-comment-content">' + $('<div>').text(comment).html() + '</div>' + // Utilzing .text() to safely set text, .html() to convert back to string
                    '</div>');
                    $('.profile-comment-create').val('');

                }else{
                    $('#comment-error').text(resp.msg);
                }
                $('#captcha').hide();
            });
            e.preventDefault();
        });
    @endif

    </script>
    @endif
	@if ($isDeveloperOrHigher)
        <script src="{{ asset('/legacy/admin.js') }}"></script>
	@endif
</body>
</html>
