
<script src="dist/js/html5-qrcode.min.js"></script>
<br><br>

<div class="card" id="secondary-card">
    <div class="card-header ui-sortable-handle" style="cursor: move; display: none;">
        <h3 class="card-title"></h3>
        <div class="card-tools"></div>
    </div>
    <div class="card-body">
       
        <div class="row card-body d-flex align-items-center w-100">
            <div class="w-100" style="width: 500px" id="reader"></div>
        </div>
    </div>
</div>
<div class="card" id="third-card" style="display: none;">
    <div class="card-header ui-sortable-handle" style="cursor: move; ">
        <h3 class="card-title">Details</h3>
        <div class="card-tools"></div>
    </div>
    <div class="card-body">
       
        <div class="row card-body" id="TransactionDetails">
        
           <div class="col-12 d-flex align-items-center w-100" id="qrreader_bt_type"></div>
           <div class="col-12 w-100" id="qrreader_bt_date"></div>
           <div class="col-12" id="qrreader_bt_schedule"></div>
           <div class="col-12" id="qrreader_bt_numbers"></div>
           <div class="col-12" id="qrreader_bt_status"></div>
         

      
        </div>
    </div>
</div>

<script>
function getbtqrdetails(response){
    console.log(response);
if (!response){
    $('#third-card').hide();
    return false;}

$('#TransactionDetails').empty();

let htmltransactiondetailsappend= '';
response.forEach(element => {
    let bet_type  = bet_types[element.bet_type];
console.log(element);    
htmltransactiondetailsappend+=

           `<div class="col-12 d-flex align-items-center w-100" id="qrreader_bt_type"><h2>${bet_type}</h2></div>
           <div class="col-12 w-100" id="qrreader_bt_date"><h3>DATE: ${element.bet_date}</h3></div>
           <div class="col-12" id="qrreader_bt_schedule"><h3>SCHEDULE: ${element.bet_schedule}</h3></div>
           <div class="col-12" id="qrreader_bt_numbers"><h3>NOs. ${element.bet_number}</h3></div>
           <div class="col-12" id="qrreader_bt_numbers"><h3>Amount: P${element.amount}</h3></div>
           <div class="col-12" id="qrreader_bt_status"></div><br><br><br><br>`;
});

//$('#qrreader_bt_type').html(bet_type);
//$('#qrreader_bt_date').html(response.bet_date);
//$('#qrreader_bt_schedule').html(response.bet_schedule);
//$('#qrreader_bt_numbers').html(response.bet_number);
//$('#qrreader_bt_status').html(response.bet_result);
$('#TransactionDetails').append(htmltransactiondetailsappend);

    $('#third-card').fadeIn(200);

    html5QrcodeScanner.clear();
}

function getbrqrdetailsfail(response){
//console.log(response);
}


  function onScanSuccess(decodedText, decodedResult) {
    let scanresultqrcontent  = decodedText;
    let dataright = { qrbtdetails : scanresultqrcontent }; 
    AjaxDo('?admin/qrbtdetails', dataright, getbtqrdetails, getbrqrdetailsfail, reqtype = 'POST');
}

var html5QrcodeScanner = new Html5QrcodeScanner(
	"reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

</script>