test view

mail@pastecode.io avatar
unknown
html
2 years ago
11 kB
1
Indexable
Never
<link rel="stylesheet" href="<?=base_url('assets/css/new_login.css')?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
  body{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important;
  }
  .timer{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important;
  }
  .swal-wide {
    width:50rem !important;
  }

  .comment-section textarea{
    width: 50%; height: 100px; margin-bottom: 20px;
  }

  /* set all stars to 'empty star' */
    .stars-container {
        display: inline-block;
        vertical-align: top;
    }
    /* set all stars to 'empty star' */
    .stars-container .star {
        float: right;
        display: inline-block;
        padding: 2px;
        color: orange;
        cursor: pointer;
        font-size: 28px;
    }
    .stars-container .star:before {
        content:"\f006";
        /* fontAwesome empty star code */
    }
    /* set hovered/selected star to 'filled star' */
    .star:hover:before, .star.selected:before {
        content:"\f005";
        /* fontAwesome filled star code */
    }
    /* set all stars after hovered/selected to'filled star' 
    ** it will appear that it selects all after due to positioning */
    .star:hover ~ .star:before, .star.selected ~ .star:before {
        content:"\f005";
        /* fontAwesome filled star code */
    }
</style>

<div style="position: fixed;width: 100%;z-index: 3;">
  <div class="container-fluid">

    <div class="row" id="login_header">

      <!-- TOP BAR -->
      <div class="col-md-4 d-none d-md-block">
        <span class="navbar-text font-weight-bold d-lg-block timer">
          <span id="date" class="text-uppercase"></span> ,
          <span id="time">Loading...</span> 
          <span id="time_ampm"></span>
        </span>
      </div>

      <div class="col-md-4 text-center pb-1">
        <img src="https://quezoncity.gov.ph/wp-content/themes/qcproject/images/qclogo_main.png" class="d-md-none img-fluid" width="15%">
      </div>

      <div class="col-md-4 text-right d-none d-md-block">
        <span class="navbar-text font-weight-bold text-uppercase d-none">
          OPERATION HOURS: <span class="text-success">OPEN</span> 8:00 AM - 5:00 PM
        </span>
      </div>
      <!-- TOP BAR END -->

    </div>

  </div>

  <!-- SECOND BAR -->
  <header id="header" style="border-bottom: 1px solid #f0f0f0">

    <div class="d-flex align-items-center topnav">
      <div class="dropdown d-none" style="z-index: 2">
        <button class="btn menu-btn " data-toggle="dropdown">
          <img src="https://quezoncity.gov.ph/wp-content/themes/qcproject/images/menu.png">
        </button>
      </div>

      <img src="<?=base_url('assets/images/QC eServices Logo1.png'); ?>" alt="" height="50px" style="margin-left: 10px;margin-top: 5px">
      <span style="color: #B9B9B9">BETA VERSION</span>

      <div class="search-container d-none">

        <div class="input-group ">
          <div class="input-group-prepend">
            <span class="input-group-text text-danger" id="search_btn"><i class='fas fa-search'></i></span>
          </div>
          <input type="text" class="form-control" placeholder="Search ..." id="txt_search">
        </div>

      </div>

    </div>
    <!-- COMMENT THIS TO REMOVE NOTICE!!! BBP -->
    <div class="d-flex align-items-center topnav">
      <div class="ml-2 navbar-text font-weight-bold d-lg-block">
        We have a daily scheduled maintenance from 2:00 AM - 2:30 AM.
      </div>
    </div>
    <!-- -->

  </header>
  <!-- END SECOND BAR -->

  <!-- CENTERED IMAGE -->
  <div class="qclogo_main text-center d-none d-md-block">
    <img src="https://quezoncity.gov.ph/wp-content/themes/qcproject/images/qclogo_main.png" width="8.5%">
  </div>
  <!-- CLOSE CENTERED IMAGE -->
</div>
<br>

<!-- body -->
  <div class="container-fluid p-5" id="content" style="background-image: url('<?=base_url()?>assets/images/Pylon Background.png'); background-size: cover; margin-top: 100px;">

    <div class="jumbotron mt-2" id="login_container">
      <div class="row">

        <div class="col-lg-12 text-center d-none d-sm-block">
          <form method="POST">
            <h1 style="font-weight: bold; font-size: 2rem;">CUSTOMER FEEDBACK FORM </h1>
            <p>Your feedback is important to us. Let us know how our service helps you in achieving your needs.</p>
            <p>Service: <strong><?php echo $res->data->service; ?></strong></p>

            <p>Rate your experience:</p>

            <span class="stars-container">
                <span id="star5" class="fa fa-star-o star"></span>
                <span id="star4" class="fa fa-star-o star"></span>
                <span id="star3" class="fa fa-star-o star"></span>
                <span id="star2" class="fa fa-star-o star"></span>
                <span id="star1" class="fa fa-star-o star"></span>
            </span>
            <input type="hidden" name="rating" id="rating">
            <input type="hidden" id="burl" value="<?php echo base_url(); ; ?>">
            <input type="hidden" name="feedback_id" id="feedback_id" value="<?php echo @$_GET['ky']; ?>">

            <div class="comment-section">
              <p>Comments/Suggestions:</p>
              <textarea name="feedback" id="feedback"></textarea>
            </div>
            
            <input type="button" data-row='0' name="btn_submit" id="btn_submit" value="SUBMIT YOUR FEEDBACK" class="btn btn-default-qc">

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

  </div>
<!-- body - end -->

<div class="container-fluid" >

    <div class="row p-5" id="login_footer">

      <!-- FOOTER BAR -->
      <div class="col-md-3 ">
        <b>Quezon City E-Services</b>
        <br><br>
      <!-- <small>
        Need Help? Send an email at<br>
        <a href="https://qceservices.quezoncity.gov.ph/" style="color: #ffffff">qceservices.quezoncity.gov.ph</a>
      </small> -->
      <small>
       For any inquiries, please call 122 or email <br> helpdesk@quezoncity.gov.ph
     </small>
   </div>

   <div class="col-md-4 ">
    <div class="row">
      <!-- FILLER -->
    </div>
  </div>

  <div class="col-md-5 text-right">
    <br>
    <a style="cursor: pointer; font-size: 9pt; display: inline-grid;" class="text-white footer_link" data-target="#toc_modal" data-toggle="modal">
      <b>
        TERMS OF SERVICE
      </b>
    </a>

    &nbsp;

    |

    &nbsp;

    <a style="cursor: pointer; font-size: 9pt; display: inline-grid;" class="text-white footer_link" data-target="#dop_modal" data-toggle="modal">
      <b>
        PRIVACY POLICY
      </b>
    </a>

    &nbsp;&nbsp;
    <a href="https://www.facebook.com/QCGov/" target="_blank">
      <i class="fa fa-facebook footer_icon"></i>
    </a>
    &nbsp;&nbsp;
    <a href="https://twitter.com/qcgov?s=11" target="_blank">
      <i class="fa fa-twitter footer_icon"></i>
    </a>
  </div>
  <!-- FOOTER BAR END -->

</div>

</div>

<script defer src="<?=base_url('assets/js/login_v2.js');?>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script defer type="text/javascript" src="<?=base_url('assets/js/browser_checker.js')?>"></script>
<script>
  $( document ).ready(function() {
    $(window).resize(function() {
      $('#content').css("margin-top", $("header").height());
    }).resize();
  });

  $(document).on('click', 'input#btn_submit',function(){

    let base_url = $('#burl').val() + "index.php/feedback/submit_applicant_feedback";
    let data = {
        rating    : $('#rating').val(),
        feedback  : $('#feedback').val(),
        feedback_id  : $('#feedback_id').val(),
    }

    if($('#rating').val() == ''){
      Swal.fire({
          title : "<h5 style='color:red'>REQUIRED FIELD</h5>",
          html : 'You must set your feedback rating.',
          button: 'OK',
          icon : "error",
          allowOutsideClick: false
      });
    }else{
      $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: base_url,
        data: data,
        success: function(res){
          var response = JSON.parse(res);
          // console.log(response);
          // Swal.fire({
          //     html : response.meta.message,
          //     icon : "success",
          //     button: 'Ok'
          // });

          if(response.meta.code == 'ok'){
              Swal.fire({
                  html : response.meta.message,
                  button: 'OK',
                  icon : "success",
                  allowOutsideClick: false
              }).then(function(){ 
                  location.reload();
                }
              );
          }else if(response.meta.code == 'already_submitted'){
            Swal.fire({
                  html : response.meta.message,
                  button: 'OK',
                  icon : "error",
                  allowOutsideClick: false
              });
          }else if(response.meta.code == 'link_expired'){
            Swal.fire({
                  title : "<h5 style='color:red; font-weight: 700;'>LINK EXPIRED</h5>",
                  html : response.meta.message,
                  button: 'OK',
                  icon : "error",
                  allowOutsideClick: false
              });
          }else if(response.meta.code == 'not_found'){
            Swal.fire({
                  title : "<h5 style='color:red'>INVALID LINK</h5>",
                  html : response.meta.message,
                  button: 'OK',
                  icon : "error",
                  allowOutsideClick: false
              });
          }

        }

      });
    }

    
  });

</script>

<script type="text/javascript">
  /* Prototype code for Rating System */

  // basic click event sets selected class
  $('.star').on('click', function () {
      resetStars();
      //add select class
      $(this).addClass('selected');

      if($('#star5').hasClass('selected')){
        $('input[name="rating"]').val(5)
      }else if($('#star4').hasClass('selected')){
        $('input[name="rating"]').val(4)
      }else if($('#star3').hasClass('selected')){
        $('input[name="rating"]').val(3)
      }else if($('#star2').hasClass('selected')){
        $('input[name="rating"]').val(2)
      }else if($('#star1').hasClass('selected')){
        $('input[name="rating"]').val(1)
      }
  });

  function resetStars() {
      //resets stars by removing selected class
      $('.star').removeClass('selected');
  }
</script>