<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Ranks & extras">
	
	<meta property="og:locale" content="en_US">
	<meta property="og:url" content="https://{{$currentDomain}}/upgrade">
	<meta property="og:type" content="website">
	<meta property="og:title" content="Doxbin">
	<meta property="og:description" content="Ranks & extras">
    <title>Upgrades - Doxbin</title>
    <link rel="stylesheet" href="legacy/index.css">
    @include('_scripts')
    
	<style>
		html{
			overflow-x: hidden;
		}
	input[type=text], select, option{
		line-height: 1.2;
		color: white;
		background: #282828;
		border: 0;
		border-radius: 2px;
		display: inline-block;
		-webkit-font-smoothing: antialiased;
		outline: none;
		padding: 7px 5px;
		width: 200px;
	}

	input[type=text]::placeholder{
		color: rgb(167, 167, 167);
	}
	input[type=submit]{
		line-height: 1.2;
		color: white;
		background: #282828;
		border: 0;
		border-radius: 2px;
		display: inline-block;
		-webkit-font-smoothing: antialiased;
		outline: none;
		padding: 7px 5px;
	}
	input, select, option{
		font-size: 100%;
	}
	input[type=submit]:hover{
		color: white;
		background: #3d3d3d;
		text-decoration: none;
	}
	.center {
	  text-align: center;
	}
    .admin-text{
        color: red;
        font-weight: bold;
    }
	.doxbin-text{
		text-align:center;
		background-color: inherit;
		line-height:15px;
		border: none;
		color: white;
		padding-bottom:0;
		margin-bottom:0;
	}
	.upgrade-title{
		margin: 5px 0 0 0;
		letter-spacing: 2px;
	}
	.upgrade-container{
		border: solid 1px rgb(40, 40, 40);
		background-color: rgb(14, 14, 14);
		width: 24%;
		border-radius: 2px;
		float: left;
		margin: 10px 0 10px 10px;
		position: relative;
		/* padding: 15px; */
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
		height: 390px;
	}
	.upgrade-container:first-of-type{
		margin: 10px 0 10px;
	}
	.name-color{
		/* background-image: linear-gradient(to right, #BB71E4 10%, #e8e8e8 20%, #efefef 3px, #f4f4f4 4px, #f7f7f7 5px, #f8f8f8 6px, #f9f9f9 100%); */
	}
	.vip-title{
		background-image: linear-gradient(120deg, #9B318E 65%, #9B418E 65% 100%);
	}
	.criminal-title{
		background-image: linear-gradient(120deg, #780A48 65%, #781A48 65% 100%);
	}
	.rich-title{
		background-image: linear-gradient(120deg, #ffd700 65%, #ffe700 65% 100%);
	}
	.colors-title{
		background-image: linear-gradient(120deg, #777777 65%, #878787 65% 100%);
	}
	.upgrade-container:hover{
		border: solid 1px rgb(44, 44, 44);
		background-color: rgb(18, 18, 18);
	}
	.upgrade-container .upgrade-name{
		padding-top: 0px;
		color: white;
		font-size: 20px;
		font-weight: bold;
		padding: 13px 10px;
	}
	.upgrade-container .perk-title{
		font-size: 14px;
		font-weight: bold;
		color: #888888;
		background-color: black;
		text-align: center;
		text-transform: uppercase;
		padding: 3px 0px 1px;
	}
	.upgrade-container .upgrade-price{
		color: white;
		float: right;
	}
	.upgrade-container .upgrade-description{
		color: rgb(200,200,200);
		word-wrap: break-word;
		overflow-y: auto;
		height: 260px;

    }

	.upgrade-description p{
		margin-bottom: 7px;
	}
    .purchase{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px;
        left: 0;

    }
    .purchase-button{
        text-align: center;
        width: 100%;
		height: 36px;
        display: inline-block;
        color: white;
        font-weight: bold;
        padding: 9px 6px 6px;
        border-radius: 3px;
		background-color: rgb(0, 78, 0);
    }

    .purchase-button:hover{
        color: white;
        text-decoration: none;
		background-color: rgb(0, 70, 0);
    }

	@media only screen and (max-width: 991px) {
		.upgrade-container{
			width: 48%;
		}
		/* div.info-container{
			width: 100%;
		} */
	}
	@media only screen and (max-width: 575px) {
		.upgrade-container{
			width: 100%;
		}
	}
	@media only screen and (max-width: 271px) {
		.upgrade-title{
			font-size: 16px;
			letter-spacing: 2px;
		}
	}
	a:focus{
		text-decoration: none;
		color: white;
	}
	div.u-perk{
		width: 100%;
		padding: 2px 5px;
		border-bottom: solid 1px #404040;
	}
	div.u-perk span{
		text-align: left;
	}
	div.u-perk span.val{
		text-align: right;
		float: right;
	}
	div.info-container{
		width: 100%;
		margin: 0 auto;
		background-color: gray;
		display: inline-block;
		background-color: rgb(14, 14, 14);
		border: solid 1px rgb(40, 40, 40);
		color: rgb(200, 200, 200);
		padding: 5px;
		border-radius: 3px;
	}
	.colors{
		background-color: #282828;
		box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
		text-align: center;
		/* padding: 10px 0px 4px; */
		border-top: solid 2px black;
		border-bottom: solid 2px black;
		font-size: 0;
	}

	.color-block{
		display: inline-block;
		width: 10%;
		border: solid 1px black;
		cursor: pointer;
		margin: 0;
		font-size: 0;
	}
	.color-block:after{
		content: "";
		display: block;
		padding-top: 100%;
	}
	.color-block:last-of-type{
		margin-right: 0;
	}
	.color-active{
		border: solid 2px white;
	}
	.preview-name{
		font-weight: 400;
	}
	.purchase > a.disabled{
		background-color: #08300f;
		cursor: not-allowed;
		color: #484848;
	}
	</style>
</head>

<body>
{!! csrf_field() !!}
    @include('_nav')
	<div class="col-md-12" style="margin-top: 60px;">
		<div class="center">
            <h4>Upgrades</h4>
		</div>
		<div id="captcha" style="height: 140px; 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);">
			@include('layouts.captcha')
			<a href="#" class="purchase-button" id="purchase-rank">Purchase</a>
		</div>
		<div class="container" style="margin-top:10px;padding: 0;">
			<div class="info-container">
				<span>Upgrades are automatically applied after 1 network confirmation. If your upgrade is not applied within 20 minutes of the first confirmation, message us on Telegram with the TXID of the payment.</span><br>
				<span><u>Purchases are final and non-refundable and cannot be transferred.</u></span>
				<span>No, we do not accept Paypal or gift cards.
				<u>Major</u> violations of TOS will result in account deletion - whether you have a rank or not.

				All questions regarding upgrades, or to purchase with other crypto, contact <a href="http://t.me/nitrous">@nitrous</a> or <a href="http://t.me/convict">@convict</a> on Telegram.</span><br>
								{{--<span>Upgrades are currently offline. Contact <a href="http://t.me/nitrous">@nitrous</a> or <a href="http://t.me/convict">@convict</a> on Telegram to purchase a rank</span><br> --}}

				{{-- <span style="text-align: center;width:100%;display:inline-block;margin-top: 3px;">More perks coming soon.</span> --}}
			</div>
			{{-- <div class="info-container" style="color: rgb(255, 255, 255); background-color: rgb(66, 0, 0);margin-top: 5px; text-align: center;">
				<span>Our BTC payment server is currently down. To purchase an upgrade, DM <a href="http://t.me/DrivenTowards2">@Operator</a> or <a href="https://t.me/viscount">@Vis</a> on Telegram and we will apply it manually.</span>
			</div> --}}
			<div class="upgrade-container">
				<div class="upgrade-name vip-title">
					VIP
					<div class="upgrade-price">{{ $buttons[1]->text }}</div>
				</div>
				<div class="perk-title">Perks</div>
				<div class="upgrade-description">
                    <div class="u-perk">
					<span>Username preview</span><span class="val" style="color: #9B318E;font-weight:bold;"><span class="preview-name">{{ !is_null($myUser) ? $myUser->username : 'Anonymous' }}</span> [VIP]</span>
					</div>
                    <div class="u-perk">
					<span>Name color</span><span class="val" style="color: #9B318E;">Light purple</span>
					</div>
                    <div class="u-perk">
					<span>Paste highlight color</span><span class="val" style="color: #9B318E;">Light purple</span>
					</div>
                    <div class="u-perk">
					<span>More noticeable</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span>.GIF profile picture</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Gives you the ability to instantly edit your pastes">Instant paste edits</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Unlist pastes to stop them from showing publicly. Only people with the link can view it.">Unlist your own pastes</span><span class="val" style="color: red;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">clear</i></span>
					</div>
                    <div class="u-perk">
					<span title="Private pastes that you've created. Only you can view it.">Private your own pastes</span><span class="val" style="color: red;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">clear</i></span>
					</div>
                    <div class="u-perk">
					<span title="Private your paste with a password">Password protected pastes</span><span class="val" style="color: red;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">clear</i></span>
					</div>
                    <div class="u-perk">
					<span>Username changes</span><span class="val">1</span>
					</div>
                </div>
                <div class="purchase">
                    <a href="#" id="2" class="purchase-button bitcoin{{ $buttons[1]->disabled }}">Purchase with Crypto</a>
                </div>
			</div>
			<div class="upgrade-container">
				<div class="upgrade-name criminal-title">
					Criminal
					<div class="upgrade-price">{{ $buttons[2]->text }}</div>
				</div>
				<div class="perk-title">Perks</div>
				<div class="upgrade-description">
                    <div class="u-perk">
					<span>Username preview</span><span class="val" style="color: #780A48;font-weight:bold;"><span class="preview-name">{{ !is_null($myUser) ? $myUser->username : 'Anonymous' }}</span> [Criminal]</span>
					</div>
                    <div class="u-perk">
					<span>Name color</span><span class="val" style="color: #780A48;">Dark purple</span>
					</div>
                    <div class="u-perk">
					<span>Paste highlight color</span><span class="val" style="color: #780A48;">Dark purple</span>
					</div>
                    <div class="u-perk">
					<span>More noticeable</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span>.GIF profile picture</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Gives you the ability to instantly edit your pastes">Instant paste edits</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Unlist pastes to stop them from showing publicly. Only people with the link can view it.">Unlist your own pastes</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">done</i></span>
					</div>
                    <div class="u-perk">
					<span title="Private pastes that you've created. Only you can view it.">Private your own pastes</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">done</i></span>
					</div>
                    <div class="u-perk">
					<span title="Private your paste with a password">Password protected pastes</span><span class="val" style="color: red;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">clear</i></span>
					</div>
                    <div class="u-perk">
					<span>Username changes</span><span class="val">2</span>
					</div>
                </div>
                <div class="purchase">
                    <a href="#" id="3" class="purchase-button bitcoin{{ $buttons[2]->disabled }}">Purchase with Crypto</a>
                </div>
			</div>
			<div class="upgrade-container">
				<div class="upgrade-name rich-title">
					Rich
					<div class="upgrade-price">{{ $buttons[3]->text }}</div>
				</div>
				<div class="perk-title">Perks</div>
				<div class="upgrade-description">
                    <div class="u-perk">
					<span>Username preview</span><span class="val" style="color: gold;background-image: url('https://{{env('CDN_DOMAIN')}}/gold.gif');font-weight:bold;"><span class="preview-name">{{ !is_null($myUser) ? $myUser->username : 'Anonymous' }}</span> [Rich]</span>
					</div>
                    <div class="u-perk">
					<span>Name color</span><span class="val" style="color: gold;background-image: url('https://{{env('CDN_DOMAIN')}}/gold.gif');">Sparkling gold</span>
					</div>
                    <div class="u-perk">
					<span>Paste highlight color</span><span class="val" style="color: gold;">Gold</span>
					</div>
                    <div class="u-perk">
					<span>More noticeable</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span>.GIF profile picture</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Gives you the ability to instantly edit your pastes">Instant paste edits</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Unlist pastes to stop them from showing publicly. Only people with the link can view it.">Unlist your own pastes</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Private pastes that you've created. Only you can view it.">Private your own pastes</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span title="Private your paste with a password">Password protected pastes</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
					<span>Username changes</span><span class="val">3</span>
					</div>
                </div>
                <div class="purchase">
                    <a href="#" id="4" class="purchase-button bitcoin{{ $buttons[3]->disabled }}">Purchase with Crypto</a>
                </div>
			</div>
			@php
			$colors = array('BB71E4', '4B2E83', 'FEC8D8', 'BB1E64', 'FFFFFF', '365DDA', 'F96D31', 'FFFE71', 'B83C26', 'C5C6D3', /*sep 22 new colors */'94FAAC', '964B00', '000080', 'FF69B4', 'FFD580', '601EF9', '30D5C8', '9999FF', '4C4CFF', '004C00');
			@endphp
			<div class="upgrade-container">
				<div class="upgrade-name colors-title">
					Change name color
					<div class="upgrade-price">{{ $buttons[0]->text }}</div>
				</div>
				<div class="perk-title">Perks</div>
				<div class="upgrade-description">
                    <div class="u-perk">
						<span>Ability to change name color</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
                    <div class="u-perk">
						<span>Amount of colors</span><span class="val">{{ count($colors)}}</span>
					</div>
                    <div class="u-perk" style="border-bottom: none;">
						<span>More noticeable</span><span class="val" style="color: green;"><i style="font-size: 15px;font-weight:bold;" class="material-icons">check</i></span>
					</div>
					<div class="perk-title">Colors</div>
					<div style="text-align: center; width: 100%;">Click a color to preview it</div>
					<div class="color-preview">
						<div class="colors">
						@foreach($colors as $color)
							<span id="{{$color}}" class="color-block" name="name-color" style="background-color: #{{ $color }};"></span>
						@endforeach
						</div>
					</div>
                </div>
                <div class="purchase">
                    <a href="#" id="1" class="purchase-button bitcoin{{ $buttons[0]->disabled }}">Purchase with Crypto</a>
                </div>
			</div>
		</div>
	</div>
	@include('layouts.captchascript')
	<script>
    	var colorSelected = false;
		$('.color-block').on('click', function(e){
            
            if(colorSelected != false){
                $('#' + colorSelected).removeClass('color-active');
            }
			if(colorSelected != $(this).attr('id')){
				$(this).addClass('color-active');
				colorSelected = $(this).attr('id');
            	$('.preview-name').css('color', "#" + $(this).attr('id'));
			}else{
				colorSelected = false;
            	$('.preview-name').css('color', '');
			}
        });
		$('div.upgrade-description span').on('click', function(e){
			
			e.preventDefault();
		});

		var a = {{ !is_null($myUser) ? 1 : 0 }};
		var working = false;

		@if(env('CAPTCHA') == 'HCAPTCHA')
    var id = 0;
    $('.purchase-button.bitcoin').on('click', function(e){
        id = $(this).attr('id');
        if(!working && !$(this).hasClass('disabled')){
            working = true;
            $('#captcha').show();
            if(!a){
                window.location = '/login';
            }
        }
        e.preventDefault();
    });

    $('#purchase-rank').on('click', function(e){
        $.post('/api/purchase', {
            _token: $('input[name=_token]').val(),
            pid: id,
            hcaptcha_token: $('[name=h-captcha-response]').val(),
        }, function(resp){
            if(resp.status == "done"){
                window.location = resp.redirect;
            }
            $('#captcha').hide();
            hcaptcha.reset();
            working = false;
        });
        e.preventDefault();
    });

	@elseif(env('CAPTCHA') == 'RECAPTCHA')

		var id = 0;
		$('.purchase-button.bitcoin').on('click', function(e){
			id = $(this).attr('id');
			if(!working && !$(this).hasClass('disabled') && a){
				working = true;
				$('#captcha').show();
			} else if(!a){
				window.location = '/login';
			}
			e.preventDefault();
		});

		$('#purchase-rank').on('click', function(e){
			$.post('/api/purchase', {
				_token: $('input[name=_token]').val(),
				pid: id,
				recaptcha_token: grecaptcha.getResponse()
			}, function(resp){
				if(resp.status == "done"){
					window.location = resp.redirect;
				}
				$('#captcha').hide();
				grecaptcha.reset();
				working = false;
			});
			e.preventDefault();
		});

	@elseif(env('CAPTCHA') == 'TURNSTILE')

		var id = 0;
		$('.purchase-button.bitcoin').on('click', function(e){
			id = $(this).attr('id');
			if(!working && !$(this).hasClass('disabled')){
				working = true;
				$('#captcha').show();
				if(!a){
					window.location = '/login';
				}
			}
			e.preventDefault();
		});

		$('#purchase-rank').on('click', function(e){
			$.post('/api/purchase', {
				_token: $('input[name=_token]').val(),
				pid: id,
				turnstile_token: $('[name=cf-turnstile-response]').val(),
			}, function(resp){
				if(resp.status == "done"){
					window.location = resp.redirect;
				}
				$('#captcha').hide();
				turnstile.reset();
				working = false;
			});
			e.preventDefault();
		});

	@endif

	</script>
</body>
</html>
