<br><br><br>
<div class="card" id="secondary-card">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title" style="" id="draw_date"></h3>
        <div class="card-tools">

        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col">
                Date
                <br>
                <h4 id="draw_date_text">...</h4>
            </div>
            <div class="col">
                Game
                <br>
                <h4 id="game_name_text">...</h4>
            </div>
            <div class="col">
                Winning Numbers
                <br>
                <h4 id="winning_numbers_text">...</h4>
            </div>
            <div class="col">
               <center>Active</center>
                <br>
                <input type="checkbox" disabled class="form-control" id="draw_active">
            </div>


        </div>

        <br><br>

        <div class="row" style="" id="draw_details_controls">
            <div class="col mx-auto" id="UpdateWinningNumbersDrawDetailsShowModalButton" style="display:none;">
                <buttton onclick="UpdateWinningNumbersModal();" id="DrawUpdateModalShowButton"
                    class="btn btn-primary btn-block">Update Winning Numbers
                </buttton>
            </div>
            <div class="col mx-auto" id="DisableDrawDetailsButton" style="display:none;">
                <buttton onclick="DrawDisableModal()" id="DrawDisableModalShowButton" class="btn btn-warning btn-block">
                    Disable Draw
                </buttton>
            </div>


        </div>


    </div>
</div>

<div class="card" id="third-card">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title" style="" id="draw_winning_numbers">Winning Bets</h3>
        <div class="card-tools">

        </div>
    </div>
    <div class="card-body">

        <table id="bet_list_table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>User</th>
                    <th>Amount</th>
                    <th >Total<br>Prize</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br><br>




    </div>
</div>

<div class="card" id="numbers-tally-board-card">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title" style="" id="draw_tally_board_numbers">Tally Board</h3>
        <div class="card-tools">

        </div>
    </div>
    <div class="card-body">

        <table id="numbers_tally_board_table">
            <thead>
                <tr>
                    <th>Number</th>
                    <th>Number of Bets</th>
                    <th>Total Amount</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br><br>
    </div>
</div>

<div class="card" id="hot_number-card">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title" style="" id="draw_hot_numbers">Hot Numbers</h3>
        <div class="card-tools">

        </div>
    </div>
    <div class="card-body">

        <table id="hot_numbers_table">
            <thead>
                <tr>
                    <th>Number</th>
                    <th>Limit of Bets</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br><br>
    </div>
    <button class="btn btn-primary btn-block" onclick="ModalNewHotNumber();">New Hot Number</button>
</div>

<br><br><br>
<script>


function  CreateNewHotNumber(){
    let targetHotNumbers =  $('#new-hot-number-draw-details').val();
    let no_of_bets =  $('#new-hot-number-draw-details-noofbets').val();
if (!targetHotNumbers){
    ModalQuickDismiss('modal-draw-details-no-hot-number-warning','Please Enter a Hot Number.','modal-new-hot-number-target-numbers-warning-no-numbers');
        return false;
}

function TryNewHotNumbers(response){
if (response===true){
    ModalQuickDismiss('Sucess','Hot Number Added.','modal-draw-details-add-hot-numbers-success','modal-new-hot-number',ReloadPage);
    modalhide('modal-new-hot-number');
}else{
    ModalQuickDismiss('Failed','Unable to Add Hot Number.'+response,'modal-draw-details-add-hot-numbers-failed');
}}
    AjaxDo('?admin/draw/hotnumber/create', {target_draw : currenttarget, target_numbers: targetHotNumbers, no_of_bets: no_of_bets}, TryNewHotNumbers, null, reqtype = 'POST');

}

function ModalNewHotNumber(){

let modalbody = dualcolrow('Hot Number',textformcontrol('new-hot-number-draw-details'))+'<br>'+
                dualcolrow('Maximum Number of Bets','<input type="number" class="form-control" value=0 id="new-hot-number-draw-details-noofbets">')+
                '<br><center>0 for blocking instantly.</center>';

    ModalContinueCancel('modal-new-hot-number','New Hot Number',modalbody,'CreateNewHotNumber();',cancelbuttontext='Cancel',continuebuttontext='Add',continuebuttoncss='btn btn-danger',cancelbuttoncss='btn btn-warning');

}



function DeleteHotNumber(targethash){
if (!targethash){return false;}



function DeleteHotNumberDrawDetailsResult(response){
if (response===true){
    ModalQuickDismiss('Success','Deleted Hot Number',modalid='modal-hotnumber-delete-success-draw-details',modaltohide='',ReloadPage,conditiontrue=true);
}else{
    ModalQuickDismiss('Failed','Unable to Delete Hot Number. <br><br>'+response,modalid='modal-hotnumber-delete-success-draw-details');
}}



AjaxDo('?admin/draw/hotnumber/delete', {target_hot_number : targethash}, DeleteHotNumberDrawDetailsResult, null, reqtype = 'POST');

}


function GenerateDrawWinningBetsRow(Date, User, Amount, Hashkey,TotalPrize) {
        let activecheckbox = '';
        User = User.replace(' ','<br>');
        const viewdetails = `<button class="btn btn-warning btn-block" onclick="gotoPage('draw_details','`+Hashkey+`')">View</button>`;
        return `<tr>
      <td>${Date}</td>
      <td>${User}</td>
      <td>${Amount}</td>
      <td>${TotalPrize}</td>
                </tr>`;
    }


    async function GenerateDrawWinningBetsListRows(responsearray) {
     //console.log(responsearray);
        $("#bet_list_table").find("tbody").html('');
        let newhtmltable = '';

        function replaceSpacesWithBR(str) {
  return str.replace("/\s/g", "<br>");
            }

        for (let i = 0; i < responsearray.length; i++) {
let betdate=responsearray[i]['bet_date'];
//betdate=replaceSpacesWithBR(betdate);

            newhtmltable += GenerateDrawWinningBetsRow(betdate, responsearray[i]['user'], responsearray[i]['amount'],responsearray[i]['hashkey'],responsearray[i]['totalprize']);

        }

      // $("#Draws_list_table").find("tbody").replaceWith(newhtmltable);
        // new DataTable('#User_list_table');


        $("#bet_list_table").find("tbody").html(newhtmltable);
        $("#bet_list_table").DataTable({
            "destroy": true,
            order: [
                [1, 'desc']
            ],
            pageLength: 5,
            lengthMenu: [
                [5],
                [5]
            ]
        })


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


    }


    function GenerateBetsDrawsTable() {
        AjaxDo('?admin/draw/list/winning/numbers', {target_draw : currenttarget}, GenerateDrawWinningBetsListRows, null, reqtype = 'POST');
    }


    GenerateBetsDrawsTable();



    function GenerateDrawNumbersTallyRow(Numbers,NumberofBets, TotalAmount) {
     
        return `<tr>
      <td>${Numbers}</td>
      <td>${NumberofBets}</td>
      <td>${TotalAmount}</td>
                </tr>`;
    }


    async function GenerateDrawNumbersTallyListRows(responsearray) {
        $("#numbers_tally_board_table").find("tbody").html('');
        let newhtmltable = '';

        for (let i = 0; i < responsearray.length; i++) {

            newhtmltable += GenerateDrawNumbersTallyRow(responsearray[i]['numbers'],responsearray[i]['numberofbets'], responsearray[i]['totalamount']);
        }
        $("#numbers_tally_board_table").find("tbody").html(newhtmltable);
        $("#numbers_tally_board_table").DataTable({
            "destroy": true,
            order: [
                [0, 'asc']
            ],
            pageLength: 5,
            lengthMenu: [
                [5],
                [5]
            ]
        });
        $('#numbers-tally-board-card').fadeIn(200);
    }

    function GenerateDrawNumbersTallyTable() {
        AjaxDo('?admin/draw/list/tally', {target_draw : currenttarget}, GenerateDrawNumbersTallyListRows, null, reqtype = 'POST');
    }


    GenerateDrawNumbersTallyTable();
    
    



    function GenerateHotNumbersRow(Numbers,NumberofBets, Hashkey) {
        if (NumberofBets===0){NumberofBets='Block All Incoming Bets';}
        let activecheckbox = '';
     const deletebutton = `<button class="btn btn-warning btn-block" onclick="DeleteHotNumber('`+Hashkey+`')">Delete</button>`;
        return `<tr>
      <td>${Numbers}</td>
      <td>${NumberofBets}</td>
      <td>${deletebutton}</td>
                </tr>`;
    }


    async function GenerateHotNumbersListRows(responsearray) {
        $("#hot_numbers_table").find("tbody").html('');
        let newhtmltable = '';

        function replaceSpacesWithBR(str) {
  return str.replace("/\s/g", "<br>");
            }

        for (let i = 0; i < responsearray.length; i++) {

            newhtmltable += GenerateHotNumbersRow(responsearray[i]['numbers'],responsearray[i]['no_of_bets'], responsearray[i]['hashkey']);
        }
        $("#hot_numbers_table").find("tbody").html(newhtmltable);
        $("#hot_numbers_table").DataTable({
            "destroy": true,
            order: [
                [0, 'asc']
            ],
            pageLength: 5,
            lengthMenu: [
                [5],
                [5]
            ]
        });
        $('#hot_number-card').fadeIn(200);
    }


    function GenerateHotNumbersDrawsTable() {
        AjaxDo('?admin/draw/list/hotnumber', {target_draw : currenttarget}, GenerateHotNumbersListRows, null, reqtype = 'POST');
    }


    GenerateHotNumbersDrawsTable();

function EnableDrawSuccessful(){
hidemodal('modal-confirm-enable-draw');
const modalid = "modal-enable-draw-success";
        const modaltitle = "Success";
        const modalbody = `<p>Draw Enabled</p><br>`;
        const modalfooter = `<button type="button" class="btn btn-default" onclick="ReloadPage();modalhide('modal-enable-draw-success');">Ok</button>`;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
}

function EnableDrawFailed(response){
    const modalid = "modal-enable-draw-failed";
        const modaltitle = "Failed";
        const modalbody = `
    <p>Unable to Enable Draw. Try Again later.</p><br>
    <p>${response}</p>`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">OK</button> `;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');

}


function EnableDrawNow(){

    function EnableDrawResponse(response){
if (response === true){    EnableDrawSuccessful();}
else{   EnableDrawFailed(response);}
}

 AjaxDo('?admin/draw/enable', { target_draw: currenttarget}, EnableDrawResponse, null, reqtype = 'POST');

}

function DrawEnableModal(){
        const modalid = "modal-confirm-enable-draw";
        const modaltitle = "Confirm";
        const modalbody = `
    <p>Are you sure you wish to enable the current draw?</p><br>`;

        const modalfooter = `<button type="button" class="btn btn-default" onclick="hidemodal('modal-confirm-enable-draw')">No</button> 
        <button type="button" class="btn btn-primary" onclick="EnableDrawNow();">Yes</button>`;

        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');

}


function DisableDrawSuccessful(){
hidemodal('modal-confirm-disable-draw');
const modalid = "modal-disable-draw-success";
        const modaltitle = "Success";
        const modalbody = `<p>Draw Disabled</p><br>`;
        const modalfooter = `<button type="button" class="btn btn-default" onclick="ReloadPage();modalhide('modal-disable-draw-success');">Ok</button>`;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
}

function DisableDrawFailed(response){
    const modalid = "modal-disable-draw-failed";
        const modaltitle = "Failed";
        const modalbody = `
    <p>Unable to Disable Draw. Try Again later.</p><br>
    <p>${response}</p>`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">OK</button> `;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');

}


function DisableDrawNow(){

    function DisableDrawResponse(response){
if (response === true){    DisableDrawSuccessful();}
else{   DisableDrawFailed(response);}
}

 AjaxDo('?admin/draw/disable', { target_draw: currenttarget}, DisableDrawResponse, null, reqtype = 'POST');

}

function DrawDisableModal(){
        const modalid = "modal-confirm-disable-draw";
        const modaltitle = "Confirm";
        const modalbody = `
    <p>Are you sure you wish to disable the current draw?</p><br>`;

        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
        <button type="button" class="btn btn-primary" onclick="DisableDrawNow();">Yes</button>`;

        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');

}




    function ModalWinningNumbersUpdateSuccessful(){
hidemodal('modal-update-winning-numbers');
        const modalid = "modal-confirm-update-winningnumbers-successful";
        const modaltitle = "Success";
        const modalbody = `
    <p>Winning Numbers Updated</p><br>`;

        const modalfooter = `<button type="button" class="btn btn-default" onclick="ReloadPage();modalhide('modal-confirm-update-winningnumbers-successful');">Ok</button>`;

        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');


    }
    function ModalWinningNumbersUpdateFailed(response){
        const modalid = "modal-confirm-update-winningnumbers-successful";
        const modaltitle = "Failed";
        const modalbody = `
         <p>Error Unable to Update Winning Numbers. Try Again Later</p><p>${response}</p><br>`;

        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button> `;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');

    }

function UpdateWinningNumbers(){
    hidemodal('modal-confirm-update-winningnumbers');

    function UpdateDrawNumbers(response){
    if (response  === true){
    ModalWinningNumbersUpdateSuccessful();}
    else{
        ModalWinningNumbersUpdateFailed(response);
    }

    }

    AjaxDo('?admin/draw/numbers/update', { target_draw: currenttarget, target_draw_numbers: $('#New-Winning-Numbers-Input').val() }, UpdateDrawNumbers, null, reqtype = 'POST');



}





function UpdateWinningNumbersModalConfirm(){
    if ($('#New-Winning-Numbers-Input').val().trim() === ""){return false;}

        const modalid = "modal-confirm-update-winningnumbers";
        const modaltitle = "Confirm";
        const modalbody = `
    <p>Update Winning Numbers?</p><br>`;


        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary" onclick="UpdateWinningNumbers()">Confirm</button>
        
                            `;

        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
}

function UpdateWinningNumbersModal(){

    const modalid = "modal-update-winning-numbers";
        const modaltitle = "Update Winning Numbers";
        const modalbody = `<center>New Winning Numbers</center>
    <p><input class="form-control" id='New-Winning-Numbers-Input'></p><br>`;


        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="UpdateWinningNumbersModalConfirm()">Update</button>`;
        

        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
   

}








    function loaddrawdetails() {
        function populatedrawdetails(response) {
            let drawdate=response.bet_schedule+'<br>'+convertTo12HRTime(response.bet_time);
            $('#draw_date_text').html(drawdate);
            $('#game_name_text').html(response.bet_type);
            $('#winning_numbers_text').html(response.winning_numbers);
          


            if (response.active === 1) { 
                $('#draw_active').prop('checked', true); 
        $('#DrawDisableModalShowButton').attr("onclick","DrawDisableModal();");
        $('#DrawDisableModalShowButton').attr("class","btn btn-warning btn-block");
        $('#DrawDisableModalShowButton').html("Disable Draw");
        }
            else { 
                $('#draw_active').prop('checked', false); 
                $('#DrawDisableModalShowButton').attr("onclick","DrawEnableModal();");
                $('#DrawDisableModalShowButton').attr("class","btn btn-primary btn-block");
                $('#DrawDisableModalShowButton').html("Enable Draw");
            }
            $('#user_coordinator').html(response.parent);
            if (response.acct_type) {
                $('#user_type_column').show();
                $('#user_type').html(response.acct_type);
            }
            if (response.total_balance) {
                $('#user_balance_column').show();
                $('#user_balance').html(response.total_balance);
            }
            if (response.nickname) {
                $('#user_type_column').show();
            }
        }

        AjaxDo('?admin/draw/details', { target_draw: currenttarget }, populatedrawdetails, null, reqtype = 'POST');
    }
    loaddrawdetails();
 //   $("#user_controls").load("?UserdetailsControls");
</script>