<br><br>
<div class="card-body card-info" id="main-card-body" style="">
      <div class="row">
<div class="col-md-18">
Welcome
</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;">
            <div class="row">
              <div class="col">
                <h4 class="card-title">Assigned Parent:</h4>
              </div>
              <div class="col">
                <h4 class="card-title" id="assigned-coordinator">...</h4>
              </div>

            </div>
          
          <div class="card-tools">
        
          </div>
          </div>
          <div class="card-body " id="credit-amount-request-form">
            
            <div class="row">
              <div class="col-6">
                <input class="form-control" type="number" id="request-credit-amount-field" placeholder="Amount to Request" >
                </div>

                <div class="col-6">
                  <button  value="Request" id ="request-credit-initial-button" class=" form-control btn btn-primary">Request</button>
                  </div>

                

            </div>

          </div>
          </div>
  
  
  
        <script>

  


function CreateAndShowModalCreditConfirmation(){

const modalid="modal-credit-request-confirmation";
const modaltitle="Continue?";


  


const modalbody=`
    <p>You are requesting credit from your assigned coordinator. Would you like to continue?</p>

    <p>Amount</p><p id="amount-to-request-text-modal"></p> 
`;
const modalfooter=`<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button"  class="btn btn-primary" id="request-credit-now">Continue</button>`;


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

$("#amount-to-request-text-modal").html($("#request-credit-amount-field").val().trim());




$("#request-credit-now").on("click", function() {

function SendCreditRequest(response){
ErrorCreditRequestResponse(response);
SuccessCreditRequestPendingResponse(response);
CurrentPendingCreditRequestResponse(response);

}

AjaxDo('?sendcreditrequestfromuser', {amount: $("#request-credit-amount-field").val().trim(), user_target: currenttarget}, SendCreditRequest, null, reqtype = 'POST');


});


}

function CreateAndShowModalCreditError(){

  const modalid="modal-credit-request-failed";
const modaltitle="Error";
const modalbody=`
   <p>Failed to send credit request. Please try again later!</p>
`;
const modalfooter=``;

const modalheaderclass='modal-header bg-danger';


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

}

function CreateAndShowModalCreditPending(){

const modalid="modal-credit-request-pending";
const modaltitle="Pending";
const modalbody=`
 <p>Your Request hava been submitted. Please wait for approval! Thank you.</p>
`;
const modalfooter=``;

const modalheaderclass='modal-header bg-primary';

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

}


function CreateAndShowModalCreditBlockedbecauseofPending(){

const modalid="modal-credit-request-pending-waiting";
const modaltitle="Current Pending Request";
const modalbody=`
 <p>Your Request was NOT submitted. You have a pending credit request. </p><p>Please wait for approval! Thank you.</p>
`;
const modalfooter=``;

const modalheaderclass='modal-header bg-warning';

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

}



function loaduserdatadashboard(){

  $.get("?userdatadashboard", function(data, status){
    $( "#total-balance" ).html(data.total_balance);
    $( "#pending-credit" ).html(data.total_credit);
    $( "#phone-number" ).html(data.number);
});


}



function loadcoordinatornumber(){
  $( "#assigned-coordinator" ).load( "?coordinatornumber" );
}

function ErrorCreditRequestResponse(response=false){

    if (response === '1' ){return true;}else if (response === '0' ){
      $("#modal-credit-request-confirmation").modal("hide");
    $("#modal-credit-request-pending").modal("hide"); 
    CreateAndShowModalCreditError();
    return;
    }
   

  }

function CheckPendingRequestForUI(){

function showpendingrequesthtml(amount){

  if (amount){
    const conhtml= `<div class="row">
              <div class="col-6">
  <h3>Current Pending Request</h3>
                </div>
                <div class="col-6"><h2>P
                  `+amount+`</h2>
                  </div></div>`; 

    $("#credit-amount-request-form").html(conhtml);
  }
}


if (currenttarget===0){
 /*
  $.get("?user/creditrequest/check/pending", function(data, status){
    showpendingrequesthtml(data.amount);
 
});
*/

AjaxDo('?user/creditrequest/check/pending', { user_target: currenttarget}, showpendingrequesthtml, null, reqtype = 'POST');

}
else{
  AjaxDo('?user/creditrequest/check/pending', { user_target: currenttarget}, showpendingrequesthtml, null, reqtype = 'POST');

}

}



  function SuccessCreditRequestPendingResponse(response=true){

if (response === '0'){return true;}else if (response ==='1'){
  $("#modal-credit-request-confirmation").modal("hide");
$("#modal-credit-request-failed").modal("hide"); 
CreateAndShowModalCreditPending();
CheckPendingRequestForUI();
return;
}
}

function CurrentPendingCreditRequestResponse(response){
if (response=== null || response ==='1' || response === '0'){
  return;
}
$("#modal-credit-request-confirmation").modal("hide");
$("#modal-credit-request-failed").modal("hide");
$("#modal-credit-request-pending").modal("hide");  
CreateAndShowModalCreditBlockedbecauseofPending();
}











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

    loaduserdatadashboard();
    loadcoordinatornumber();
    CheckPendingRequestForUI();






  $("#request-credit-initial-button").on("click", function() {
    let inputValue = $("#request-credit-amount-field").val().trim();
    if (inputValue && inputValue.length > 0 && !isNaN(inputValue) && parseFloat(inputValue) > 0) {
      CreateAndShowModalCreditConfirmation();   } 
      else {    $("#modal-credit-request-confirmation").modal("hide");   }
  });


  





 

});

  

  
  </script>
  
  