@extends("layouts.layout")

@section("content")
<center>
	<div class="ir-boxD">
		<div>Round hash: <span id="hashDice">hidden</span></div>
		<div>Secret hash: <span id="secretDice">hidden</span></div>
	
		<div class="box-section">
			<div class="boxesD box-firstD">
				<label class="ir-labelD" style="color: hsla(0,0%,100%,.6); font-weight: 600; font-size: 11px;">BET AMOUNT</label><br>
				
				<div class="container-fluid" style="display: inline-block; width: 100%;padding:0px; height: 48px;">
					<ul style="padding-left: 15px; margin-top: 6px;">
						<div class="pull-left">
							<img class="coins" src="/template/img/coins.png">
							<input type="text" placeholder="Bet Amount..." data-value="0" id="diceAmount" style="font-weight: 400;">
						</div>
						<div class="pull-right">
							<button type="button" class="roulette-change-bet header-buttonst betDice" data-action="clear" style="font-size: 11px;">Clear</button>
							<button type="button" class="btn-3d-dark roulette-change-bet header-buttonst betDice" style="padding: 5px;width: 45px;" data-action="half">1/2</button>
							<button type="button" class="btn-3d-dark roulette-change-bet header-buttonst betDice" style="padding: 5px;width: 45px;" data-action="double">x2</button>
						</div>
					</ul>
				</div>
			</div>
			<div class="boxesD box-secondD">
				<label class="ir-labelD pull-right" style="color: hsla(0,0%,100%,.6); font-weight: 600; font-size: 11px;">PROFIT ON WIN</label><br>
				
				<div class="container-fluid" style="width: 100%;display: inline-block;padding: 0;">
					<ul style="margin-top: 5px;margin-bottom: 5px;padding-left: 5px;">
						<img class="coins" src="/template/img/coins.png">
						<input type="text" value="200" id="possibleWinnings" style="width: 80px; font-weight: 400;">
					</ul>
				</div>
			</div>
		</div>
		<br><br>
		<div class="box-section">
			<div class="boxesD box-firstDD">
				<label class="ir-labelD" style="color: hsla(0,0%,100%,.6); font-weight: 600; font-size: 11px;">ROLL <span style="color: #00c74d;" id="e-o-u">UNDER</span></label><br>
				
				<div class="container-fluid" style="width: 100%;display: flex;padding: 0;">
					<ul style="cursor: pointer; height: 50px;width: 50px;display: inline-flex;padding: 0px; margin: 0;background-color: #31353c; border-radius: 10px;">
						<img style="height: 50px;width: 50px;" class="" src="/template/img/switch.svg" id="typeDice" data-type="over">
						<img style="height: 50px;width: 50px;" class="hidden" src="/template/img/switch.svg" id="typeDice" data-type="under">
					</ul>
					<input type="text" value="47.5" id="a-o-u" disabled="" style="width: 120px; font-weight: 400;">
				</div>
			</div>
			<div class="boxesD box-middleDD" style="text-align: center;">
				<label class="ir-labelD" style="color: hsla(0,0%,100%,.6); font-weight: 600; font-size: 11px;">WIN CHANCE</label><br>
				
				<div class="container-fluid" style="width: 100%;display: inline-block;">
					<ul style="margin-top: 5px;margin-bottom: 5px;">
						<input type="text" value="47.5" id="diceSlider1" style="width: 80px; font-weight: 400;">
					</ul>
				</div>
			</div>
			<div class="boxesD box-secondDD">
				<label class="ir-labelD pull-right" style="color: hsla(0,0%,100%,.6); font-weight: 600; font-size: 11px;">MULTIPLIER</label><br>
				
				<div class="container-fluid" style="width: 100%;display: inline-block;">
					<ul style="margin-top: 5px;margin-bottom: 5px;">
						<input type="text" id="diceSlider2" value="2" disabled="" style="width: 80px; font-weight: 400;">
					</ul>
				</div>
			</div>
		</div>
		<br><br>
		<div class="box-section">
			<input type="range" id="diceSlider" min="0.01" max="94" step="0.01" value="47.5" style="width:600px !important;"><br>
			<div>
				<div class="pull-left" style="color: hsla(0,0%,100%,.6); font-weight: 600; font-size: 11px;">0</div>
				<div class="pull-right" style="color: hsla(0,0%,100%,.6); font-weight: 600; font-size: 11px;">100</div>
			</div>
		</div>
		<br><br><br>
		<div class="box-section"><button id="rollDice" style="width: 100%; font-size: 14px; font-weight: 600;" class="btn header-buttons purpler btn-lg btn-block">ROLL!</button></div>
	</div>
	<br><br>
	<div id="histDice" style="width: 70%;">
	</div>
</center>
@endsection