<br><br><br><br>

<div class="card" id="secondary-card" style="display:none;">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <h3 class="card-title">Draws</h3>
        <div class="card-tools"><button class="btn btn-primary btn-block" onclick="ModalCreateDraw();">New Draw</button></div>
    </div>
    <div class="card-body">

        <table id="Draws_list_table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Game</th>
                    <th>Winning Number</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br>
       

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

<script>



    function CreateDrawNow() {

function ModalCreateDrawSuccess(){
        const modalid = "modal-create-draw-success";
        const modaltitle = "Success";
        const modalbody = `Draw Created`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>`;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
        modalhide('modal-create-draw');
    }

function ModalCreateDrawFailed(response){
 if (response.includes('Draw Exists, Update the Draw If necessary.')){
   response =  response.replace('Draw Exists, Update the Draw If necessary.','');
   modalhide('modal-create-draw');
   gotoPage('draw_details',response);
   response='Draw Exists!';
 }
       const modalid = "modal-create-draw-success";
        const modaltitle = "Failed";
        const modalbody = `Unable to Create Draw <br>`+response;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>`;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');

    }


        function CreateDraw(response) {
        if(response.length === 72){
            ModalCreateDrawSuccess();
            gotoPage('draw_details',response);
        }
        else{ModalCreateDrawFailed(response);}



        }

        AjaxDo('?admin/advanced/draw/create', {
            draw_type: $('#draw-b-type').val(),
            draw_sched: $('#draw-scheddate').val() +' '+$('#draw-schedtime').val(),
            winning_numbers: $('#draw-winning-numbers-create-draw').val()
        }, CreateDraw, null, reqtype = 'POST');

    }

    function ModalCreateDraw() {
        const modalid = "modal-create-draw";
        const modaltitle = "New Draw";
        const modalbody = `
     <div class="row card-body">
      <div class="col mx-auto" id="">
      <label for="draw-b-type">Bet type:</label>
      </div>
      <div class="col mx-auto" id="">
        <select id="draw-b-type" class="form-control">${bet_types_options}</select>
      </div>
    </div>
        
        <div class="row card-body schedrow">
        <div class="col-6">
          <input type="date" class="form-control" id="draw-scheddate" name="scheddate" min="" max="">
        </div>
        <div class="col-6">
          <select id="draw-schedtime" class="form-control"></select>
        </div>
        
        
        </div>
        <div class="row card-body">
      <div class="col mx-auto" id="">
      <label for="draw-winning-numbers-create-draw">Winning Numbers:</label>
      </div>
      <div class="col mx-auto" id="">
      <input class='form-control block' id="draw-winning-numbers-create-draw"> 
      </div>
    </div>
       
`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
                            <button type="button" class="btn btn-primary"  onclick="CreateDrawNow();">Create Draw</button>`;
        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');

        const scheddateselect = 'draw-scheddate';
        const btypeid = 'draw-b-type';
        const schedtimeselect = 'draw-schedtime';
        const FifteenminsBefore = false;

        resetDatePicker(scheddateselect, btypeid, schedtimeselect, FifteenminsBefore);


        document.getElementById('draw-b-type').addEventListener('change', function() {

            resetDatePicker(scheddateselect, btypeid, schedtimeselect, FifteenminsBefore);
        });

        document.getElementById('draw-scheddate').addEventListener('change', function() {
            updateSchedtimes(btypeid, schedtimeselect, scheddateselect, FifteenminsBefore);
        });

    }


    function GenerateDrawDetailsRow(Date, Game, WinningNumber, Hashkey) {
        let activecheckbox = '';
        const viewdetails = `<button class="btn btn-warning btn-block" onclick="gotoPage('draw_details','` + Hashkey + `')">View</button>`;
        return `<tr>
      <td>${Date}</td>
      <td>${Game}</td>
      <td>${WinningNumber}</td>
      <td>${viewdetails}</td>
                </tr>`;
    }


    async function GenerateDrawListRows(responsearray) {

        $("#Draws_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 drawsched = responsearray[i]['bet_schedule'] + '<br>' + responsearray[i]['bet_time'];
            drawsched = replaceSpacesWithBR(drawsched);

            newhtmltable += GenerateDrawDetailsRow(drawsched, responsearray[i]['bet_type'], responsearray[i]['winning_numbers'], responsearray[i]['hashkey']);

        }

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


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


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


    }


    function GenerateDrawsTable() {
        AjaxDo('?admin/advanced/draw/list', null, GenerateDrawListRows, null, reqtype = 'POST');
    }


    //AjaxDo('?draw/update/today/from/online', null, false, false, 'GET', caching = false);

    GenerateDrawsTable();
</script>