BarangaySystem/legacy/pages-html/slvl/user/old/place-betold

<div class="card-body card-info" id="main-card-body" style="">
      <div class="row">
<div class="col-md-18">
Welcome User
</div>
</div>

<br>
<div class="row card-info">
  <div class="col-md-18 card bg-gray text-xl border-rounded" style="width:100%;height:20%;">
      <div class="row">
        <div class="col-md-6">
          Total Balance
        </div>
        <div class="col-md-6" id="total-balance">
         
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
        
        </div>
        <div class="col-md-6" id="credited-balance">
         
        </div>
      </div>
<br><br>
      <div class="row">
        <div class="col-md-6 text-sm" id="phone-number">
       ...
        </div>
        <div class="col-md-6" >
        
        </div>
      </div>
    

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




      <div class="card" id="secondary-card">
        <div class="card-header ui-sortable-handle" style="cursor: move;display: none;">
        <h3 class="card-title" style=""></h3>
        <div class="card-tools">
      
        </div>
        </div>
        <div class="card-body "><div class="row card-body">

<!--
          <div class="col mx-auto" id="regionbutton"><button class="bg-transparent border-0 btn-block" style="" onclick="">
                <div class="card-body box-profile">
                <div class="text-center">
                <img class=" img-circle rounded mx-auto d-block" src="assets/lotto649.png" width="75px" height="75px" style="overflow:hidden;"></div>
                <h3 class="profile-username text-center">Super Lotto 6/49 </h3>
                <p class="text-muted text-center"></p>
                </div>
                </button></div>

          <div class="col mx-auto" id="agenciesbutton"><button class="bg-transparent border-0 btn-block" onclick="">
                      <div class="card-body no-border">
                      <div class="text-center">
                      <img class="rounded mx-auto d-block" src="assets/lotto658.png" width="75px" height="75px" style="overflow:hidden;"></div>
                      <h3 class="profile-username text-center">Ultra Lotto 6/58</h3>

                      <p class="text-muted text-center"></p>
                     
                </div>
                      </button></div>

<div class="col mx-auto" id="acsbutton"><button class="bg-transparent border-0 btn-block" onclick="">
                            <div class="card-body box-profile">
                            <div class="text-center">
                            <img class="rounded mx-auto d-block" src="assets/megalotto645.png" width="75px" height="75px" style="overflow:hidden;"></div>
                            <h3 class="profile-username text-center">Mega Lotto 6/45</h3>
                            <p class="text-muted text-center"></p>
                            </div>
                            </button></div>

<div class="col mx-auto" id="uposbutton"><button class="bg-transparent border-0 btn-block" onclick="">
                                  <div class="card-body box-profile">
                                  <div class="text-center">
                                  <img class="rounded mx-auto d-block" src="assets/lotto642.png" width="75px" height="75px" style="overflow:hidden;"></div>
                                  <h3 class="profile-username text-center">Lotto 6/42</h3>
                                  <p class="text-muted text-center"></p>
                                
                                  </div>
                                  </button></div>

<div class="col mx-auto" id="uposbutton"><button class="bg-transparent border-0 btn-block" onclick="">
        <div class="card-body box-profile">
                                    <div class="text-center">
                                    <img class="rounded mx-auto d-block" src="assets/4dlotto.png" width="75px" height="75px" style="overflow:hidden;"></div>
                                    <h3 class="profile-username text-center">4D Lotto</h3>
                                    <p class="text-muted text-center"></p>
                                  
                                    </div>
                                    </button></div>

            <div class="col mx-auto" id="uposbutton"><button class="bg-transparent border-0 btn-block" onclick="">
                  <div class="card-body box-profile">
                                       <div class="text-center">
                                  <img class="rounded mx-auto d-block" src="assets/3dlotto.png" width="75px" height="75px" style="overflow:hidden;"></div>
                                      <h3 class="profile-username text-center">3D Lotto</h3>
                               <p class="text-muted text-center"></p>
                                          
                          </div>
                   </button></div>

     <div class="col mx-auto" id="uposbutton"><button class="bg-transparent border-0 btn-block" onclick="">
       <div class="card-body box-profile">
          <div class="text-center">
         <img class="rounded mx-auto d-block" src="assets/6dlotto.png" width="75px" height="75px" style="overflow:hidden;"></div>
        <h3 class="profile-username text-center">6D Lotto</h3>
          <p class="text-muted text-center"></p>
                                            
                            </div>
                     </button></div>

                     <div class="col mx-auto" id="uposbutton"><button class="bg-transparent border-0 btn-block" onclick="">
                      <div class="card-body box-profile">
                         <div class="text-center">
                        <img class="rounded mx-auto d-block" src="assets/2dlotto.png" width="75px" height="75px" style="overflow:hidden;"></div>
                       <h3 class="profile-username text-center">2D Lotto</h3>
                         <p class="text-muted text-center"></p>
                                                           
                                           </div>
                                    </button></div>

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

        <div class="card" id="secondary-card-betting">
          <div class="card-header ui-sortable-handle" style="cursor: move;display: none;">
          <h3 class="card-title" style="" ></h3>
          <div class="card-tools">
        
          </div>
          </div>
          <div class="card-body ">
            <div class="row card-body">
            <div class="col mx-auto" id="">
            Bet type:
            </div>
            <div class="col mx-auto" id="">
              <select id="b-type" class="form-control"></select>
            </div>
      </div>
     <div class="row card-body">
        <div class="col mx-auto" id="">
          Date:
        </div>
        <div class="col mx-auto" id="">
          <select id="sched" class="form-control"></select>
        </div>
  </div>
    



    </div>
          </div>



<div class="card" id="third-card-betting">
            <div class="card-header ui-sortable-handle" style="cursor: move;">
            <h3 class="card-title" style="" id="selected-numbers"></h3>
            <div class="card-tools bg-warning" style="display: none;">
          Maximum Numbers Selected
            </div>
            </div>
            <div class="card-body text-center" id="bubble-sheet-card">


         
  
  
  
      </div>
            </div>

            <div class="card" id="fourth-card-confirm" style="display: none;">

              <div class="card-body text-center" id="bubble-sheet-card">
  <button class="form-control border-rounded  btn-danger" onclick="trytosubmitB();">Confirm</button>
  
        </div>
 </div>
<div id="br-space" style="display:none;">
  <br><br><br><br><br><br><br>
</div>

  
  
  
        <script>

  

var gamesdetails = null;
var gamemaxnumberofdigits=null;

function numberofselectedbuttons(){
 return $(".l-button.btn-danger").length;
}

function IsSelectedNumbersMax(){
if ($(".custom-select.numbersinorderselect").length !== 0){
  return true;
}

  if (!gamemaxnumberofdigits || gamemaxnumberofdigits===-1){
    return false;
  }
if (numberofselectedbuttons()<gamemaxnumberofdigits){
  return false;
}else{return true;}

}

function currentgametype(){
  return $("#b-type").val();
}

function hideconfirmbutton(){
  $("#third-card-betting .card-tools").hide();
  $("#fourth-card-confirm").hide();
}

function hideselectednumbersTop(){
  $("#selected-numbers").html("");
}

function showconfirmbutton(){
  $("#third-card-betting .card-tools").show();$("#fourth-card-confirm").fadeIn(200);
  $("#br-space").show(); 
}


function repopulatebtype(response){
  console.log();
  $("#b-type").empty();
  $("#sched").empty();
  hideconfirmbutton();
  hideselectednumbersTop();

let dateoptions='';


  for (var key in response) {  
  var optionValue = response[key]['hashkey'];
  var optionText = response[key]['bet_type'];

  $("#b-type").append($('<option>', { value: optionValue, text: optionText }));
  

  }
  reloadschedbyvalue();

}

function repopulatedatesched(response){

  for (var key in response) {  
  var optionValue = response[key];
  

  $("#sched").append($('<option>', { value: optionValue, text: optionValue }));
  
  }

  populatebuttonsb();

}

function reloadschedbyvalue(){
  hideconfirmbutton();
  hideselectednumbersTop();
  $("#sched").empty();
  const  currentgametype = $("#b-type").val();
  const dataRight = { game: currentgametype };
  AjaxDo('?user/bet/sched',dataRight,repopulatedatesched, null,reqtype='POST');
}



function GenerateButtonsForNumberSelectionRANDOM(response_max_digits){
  let newhtmlbuttons = '<div class="row">';

    function newbuttonhtml(currentnumber){
   return   '<button class="l-button btn btn-primary rounded-circle" value="'+currentnumber+'">'+currentnumber+'</button>';
    }

    for (let i = 1; i <response_max_digits+1; i++) {
    let currentnumber= i.toString().padStart(2, "0");
    newhtmlbuttons += '<div class="col-1  mx-3 my-2">'+newbuttonhtml(currentnumber)+'</div>';
                          }
      newhtmlbuttons +='</div>';
      return newhtmlbuttons;
}

function GenerateButtonsForNumberSelectionINORDER(response_max_digits,response_number_of_digits){
  let newhtmlbuttons = '<div class="row">';

    function newbuttonhtml(currentnumber,maxdigits){
      let newhtml='<select class="custom-select numbersinorderselect" id="SelectedNumber-'+currentnumber+'">';
      for (let i = 1; i <maxdigits+1; i++) {
        let newnumbernumber= i.toString().padStart(2, "0");
newhtml+='<option value="'+i+'">'+newnumbernumber+'</option>';
      }

   return   newhtml+='</select>';
    }

    for (let i = 1; i <response_number_of_digits+1; i++) {
    let currentnumber= i.toString().padStart(2, "0");
    newhtmlbuttons += '<div class="col mx-auto"><br>'+currentnumber+' '+newbuttonhtml(currentnumber,response_max_digits)+'</div>';
                          }
      newhtmlbuttons +='</div>';
      return newhtmlbuttons;
}




function populatebuttonsnow(response) {
hideconfirmbutton();
hideselectednumbersTop();

  let newhtmlbuttons; // Declare the variable outside the if-else block

  if (response.numbers_must_be_in_order) {
    newhtmlbuttons =GenerateButtonsForNumberSelectionINORDER(response.max_digits,response.number_of_digits);
   // $("#fourth-card-confirm").show();
   showconfirmbutton();
  } else {
    newhtmlbuttons = GenerateButtonsForNumberSelectionRANDOM(response.max_digits);
 
  }

  $("#bubble-sheet-card").html(newhtmlbuttons);
  $("#bubble-sheet-card").fadeIn(200);
 
  var Bbuttons = [];

  gamemaxnumberofdigits = response.number_of_digits;
  $(".l-button").click(function () {
    if ($(this).hasClass("btn-primary")) {
      if (!IsSelectedNumbersMax()) {
        $(this).removeClass("btn-primary");
        $(this).addClass("btn-danger");
      } else {
        // Handle case when max numbers are selected
      }
    } else {
      $(this).removeClass("btn-danger");
      $(this).addClass("btn-primary");
      $("#third-card-betting .card-tools").hide();
      $("#fourth-card-confirm").hide();
    }
    showSelectedNumbers(gamemaxnumberofdigits);
  });
  
}

function populatebuttonsb() {
  $("#bubble-sheet-card").fadeOut(200);
  $("#bubble-sheet-card").empty();

  const dataRight = { game: $("#b-type").val() };
 
  AjaxDo('?user/bet/buttons', dataRight, populatebuttonsnow, null, reqtype = 'POST');
}



function showSelectedNumbers(number_of_digits=-1) {
    const selectedButtons = document.querySelectorAll('.l-button.btn-danger');
    let selectedNumbers = '';
if (selectedButtons.length===number_of_digits){
showconfirmbutton();
}
    selectedButtons.forEach(button => {
        selectedNumbers += button.textContent + '-';
    });

    document.getElementById('selected-numbers').textContent = 'Selected Numbers: ' + selectedNumbers;
    return selectedNumbers;
  }


function getselectednumbers(){

  var buttonValues = ""; 
  if ($(".l-button.btn-danger").length === 0) {

    const selectedValues = [];

    $(".numbersinorderselect").each(function() {
      if ($(this).is("select")) {
        let currentnumber= $(this).val().toString().padStart(2, "0")
        selectedValues.push($(this).val());
        buttonValues+=currentnumber+'-';
      } 
    });

  } else {

  $(".l-button.btn-danger").each(function() {
    var buttonValue = $(this).val();  
    buttonValues += buttonValue + "-";  
  });
  }



  return buttonValues;
}

function BetFailed(response){
  CreateAndShowModal('betting-failed','Failed','Your bet didn\'t go through. Please Try Again Later!','');
}
function BetSuccessful(response){
  CreateAndShowModal('betting-success','Success','Successfully Entered Bet!','');
  gotoPage('bet_qr',response);
}


function trytosubmitB(){
//let selectedNumbers = showSelectedNumbers();
let selectedNumbers = getselectednumbers();
if (!IsSelectedNumbersMax()){return false;}

function SubmitNow(response){
if(!response){BetFailed(); return false;}
else{
  BetSuccessful(response);
}



}

const data = { user_target: currenttarget, game: currentgametype(), selected_numbers: selectedNumbers, schedule : $("#sched").val() };
AjaxDo('?user/bet/submit',data,SubmitNow, null,reqtype='POST');
}




    $(document).ready(function() {
    var currenttarget=0;

    loaduserdatadashboard();
    AjaxDo('?user/bet/tps',null,repopulatebtype, null,reqtype='POST');

    const  currentgametype = $("#b-type").val();
    const dataRight = { game: currentgametype };
   
 
    $("#b-type").change(reloadschedbyvalue);


 

});



if (currenttarget!==0){

function PostUserNumber(response){

  CreateAndShowModal('TargetBetUserWarn','Betting for a Different User','You are betting for '+response+'.');

}

AjaxDo('?query/user/number/byhash',{ user_target: currenttarget},PostUserNumber, null,reqtype='POST');

  
}






  
  </script>