FloatBackOfffice/application/views/member/extra/member_detail.php

<!-- 
 street1   | character varying(50)       |
 street2   | character varying(50)       |
 city      | character varying(50)       |
 zipcode   | character varying(12)       |
 state     | character varying(50)       |
 country   | character varying(2)        |
-->
<div style="width:100%;">
  <div class="row col-lg-11">
    <form name="member_detail_form" id="member-detail-form" autocomplete="off">
      <div class="form-group row">
        <div class="col-lg-12">
          <label for="start_address" class="font-weight-bold col-lg-2 col-form-label">
            Status
          </label>
          <div class="col-lg-5">
            <?= $card_status ?>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-lg-12">
          <label for="start_date" class="font-weight-bold col-lg-2 col-form-label">
            Date
          </label>
          <div class="input-daterange">
            <div class="col-lg-5">
              <input type="search" name="start_date" id="start_date" value="<?= $start_date ?>" class="form-control">
            </div>
            <div class="col-lg-5">
              <input type="search" name="end_date" id="end_date" value="<?= $end_date ?>" class="form-control">
            </div>
          </div>
        </div>
      </div>
      <input type="hidden" id='member_id' name='member_id' value="<?= $member_id ?>" />
      <div class="form-group row col-lg-12">
        <div class="col-lg-12">
          <input type="button" id="search-member-detail" value="Search" class="btn btn-info legitRipple" />
        </div>
      </div>
    </form>
  </div>
  <form name="memberProfile" id="memberProfile" action="/member/updateMemberProfile">
    <input type="hidden" id='member_id' name='member_id' value="<?= $member_id ?>" />
    <table class="table">

      <tbody>
        <tr>
          <th width="50px;" scope="row">Firstname</th>
          <td><?= $firstname ?></td>

        </tr>
        <tr>
          <th scope="row">Lastname</th>
          <td><?= $lastname ?></td>

        </tr>
        <tr>
          <th scope="row">Email</th>
          <td><?= $email ?></td>
        </tr>
        <tr>
          <td colspan="2">
            <img id="profile_picure" src="<?= $storage ?>profile/<?= $member_id ?>.<?= $picture_format ?>" alt="..." class="img-thumbnail" onChange='getoutput()'>
          </td>
        </tr>

        <tr>
          <td colspan="2" style="text-align:center">
            <input type="hidden" name="catid" value="5">
            <input type="file" name="cardimg" id="cardimg">
            <button id="btn_upload" type="button" class="btn btn-info btn-sm" onclick="return submitProfileImage(this.form);">Change Picture</button>
          </td>
        </tr>

      </tbody>
    </table>
    <div>
      <ul>
        <? $i = 0;
        foreach ($devices as $player_id) { ?>
          <li><input type="radio" name="player_id" value="<?= $player_id ?>" <?= $i == 0 ? 'checked' : '' ?>> <?= $player_id ?></li>
        <? $i++;
        } ?>
      </ul>
    </div>
    <input type="submit" value="Send Test Message" class="btn btn-info" onclick="return sendSampleMessage(this.form);">
    <div id="message_sent"></div>
  </form>
</div>

<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script type="text/javascript">
  let member_id = '<?= $member_id ?>';
  // Attach a submit handler to the form
  function sendSampleMessage(form) {
    if (form.player_id == null || form.player_id.value == null) {
      alert('No devices registered!');
      return false;
    }
    $('#message_sent').html('Processing...');
    $('#acc' + member_id).prop('disabled', true);

    //alert(form.member_id.value);
    var post_data = {
      'member_id': form.member_id.value,
      'player_id': form.player_id.value,
      'message': 'This is a test message to member ' + form.member_id.value,
    };
    // Get some values from elements on the page:
    var url = "/member/sendSampleMessage";
    // Send the data using post
    var posting = $.post(url, post_data);
    // Put the results in a div
    posting.done(function(data) {
      $('#message_sent').html(data);
      $('#acc' + member_id).prop('disabled', false);
    });
    return false;
  }

  function submitProfileImage(form) {
    $.ajax({
      url: '/member/profileImageUpload',
      type: "post",
      data: new FormData(form),
      processData: false,
      contentType: false,
      cache: false,
      async: false,
      success: function(data) {
        alert("Upload Profile Image Successful: " + data);
        const d = new Date();
        $('#profile_picure').attr("src", "<?= $storage ?>profile/<?= $member_id ?>." + extension + "?" + d.getTime());
      }
    });
    return false;
  }
  var extension = '<?= $picture_format ?>';

  function getoutput(event) {
    if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
      return;
    }
    const name = event.target.files[0].name;
    const lastDot = name.lastIndexOf('.');
    const fileName = name.substring(0, lastDot);
    const ext = name.substring(lastDot + 1);
    //outputfile = fileName;
    extension = ext;
  }

  $(document).ready(function() {
    // Datepicker
    $("#start_date").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      format: 'yyyy-mm-dd',
      onClose: function(selectedDate) {
        $("#start_date").datepicker("option", "minDate", selectedDate);
      }
    })

    $("#end_date").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      format: 'yyyy-mm-dd',
      onClose: function(selectedDate) {
        $("#end_date").datepicker("option", "maxDate", selectedDate);
      }
    })

    $('#search-member-detail').on('click', () => {
      setDefaultDate();
    })

    $('#member-detail-form').ready(() => {
      setDefaultDate();
    });

    function setDefaultDate() {
      if ( ! $('#start_date').val() && ! $('#end_date').val()) {
        $('#start_date')
          .datepicker('setDate', moment(moment.now())
          .subtract(1,'months').format("YYYY/MM/DD"));
        $('#end_date')
          .datepicker('setDate', moment(moment.now())
          .format("YYYY/MM/DD"));
      }
    }
  })
</script>