@extends('layouts.layout_queue')
@section('title', 'EndoCapture')

@section('style')
<style>
*{
    font-family: 'Kanit', sans-serif;
}
.super_btn{
    width: 550px;
    height: 550px;
    border-radius: 50%;
    opacity: 0.9;
    /* border: none; */
}
.new-pt{
    background: #EBEB9B;
    border:50px solid #73906794;
    color: #707070;
}
.old-pt{
    background: #8AE7F1;
    border:50px solid #3dadb9e6;
    color: #707070;
}
.old-pt:active{
    background: #67adb4;
    border:50px solid #276970e6;
}
.old-pt:hover,.new-pt:hover{
    color: green;
    background: #8af1ac;
    border:50px solid #6fb93de6;
    text-shadow: 0px 0px 3px #fff;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 15px;
  width: 100%;
  background-color: #9BE2E0;
  color: white;
  text-align: center;
}
h1{
    font-size: 4rem;
}
</style>
@endsection

@section('content')
<div class="row" style="margin: 0;margin-top: 10%;">
    <div class="col-6 text-center">
        <div class="row" style="background: #fff;width:70%;margin: auto;margin-top:-7%;padding:15px;border: 3px solid black;height: 120%;">
            <div class="col-12" style="margin-top: 20px;"><h3> HN 44327</h3></div>
            <div class="col-12"><h1>Q 023</h1></div>
            <div class="col-12"><h3>คิวก่อนหน้า 22 คน</h3></div>
            <div class="col-12" style="margin-bottom: 20px;"><img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8" title="Link to Google.com" /></div>
        </div>
    </div>
    <div class="col-6 text-center"><button class="super_btn old-pt"><h1>ปริ๊นท์</h1></button></div>
</div>


<div class="footer">
    <p>&emsp;</p>
</div>

@endsection


@section('endscript')
@section('content')