%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/ugotscom/public_html/maputilities/
Upload File :
Create Path :
Current File : /home/ugotscom/public_html/maputilities/tool.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Maputilities</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Medilab - v2.0.0
  * Template URL: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

<?php include('header.php');?>

 
 <div class="container">

 <form action="" id="app" class="">
 
 <section v-if="step==1" class="formsections">
 <div class="d-flex justify-content-center">
 <div class="comparisonform">
 <h3>Get your Quote</h3>
 <p>We'll use your address to find the best deals in your area.</p>

 <label for="postcode">Post Code</label>
 <input type="text" class="form-control" v-model="form.postcode">
 <label for="Address">Address</label>
 <select v-model="form.address" class="form-control" :value="getAddress">
  <option v-for="user in users.result" >
    {{ user.line_1 + ", " + user.line_2}}
  </option>
</select>
<label for="Email">Email</label>
 <input type="text" class="form-control " v-model="form.email">
 <input type="checkbox" name="terms" >   I’m happy to receive occasional emails from Maputilities. 
 </div>
 </section>
 <section v-if="step==2" class="formsections"> 
 <div class="comparisonform">
 <div class="middle">
 <h3>What shall we switch?</h3> 
 <p>We think your home has Gas and Electricity.</p>
 <div class="wrapperbutton">
  <label>
  <input type="radio" name="radio" value="24" v-model="form.switch"/>
  <div class="back-end box2">
   <img src="assets/img/icons/gas-elec.png">
    <span>Gas & Electricity</span>
  </div>
</label>
<label>
  <input type="radio" name="radio" value="25" v-model="form.switch"/>
  <div class="back-end box2">
   <img src="assets/img/icons/electric.png">
    <span>Electricity Only</span>
  </div>
</label>
</div>
</div>
</div>
 </section>
 <section v-if="step==3" class="formsections">
 <div class="d-flex justify-content-center">
 <div class="comparisonform">



 <h3>How much energy do you use?</h3> 
  <div class="inputGroup">
    <input id="radio1" value="One" type="radio" v-model="form.opt"/>
    <label for="radio1">I Know how much i spend</label>
  </div>
  <div class="inputGroup">
    <input id="radio2" value="tOne" type="radio" v-model="form.opt"/>
    <label for="radio2">I know how much i use</label>
  </div>
  <div class="inputGroup">
    <input id="radio3" value="O4ne" type="radio" v-model="form.opt"/>
    <label for="radio3">I am not sure</label>
  </div>
  </div>
  </div>
 </section>
 <section v-if="step==4">
 <div class="d-flex justify-content-center">
 <div class="comparisonform">

 <div v-if="form.opt == 'One'">
    <h3>I know how much I spend (£) </h3>
    <label class="et">Electricity</label>
    <div class="form-inline">
    <input type="text" v-model="form.elecspend" class="form-control" placeholder="Cost">
    <select class="form-control">
     <option>Per Month</option>
     <option>Per Quarter</option>
     <option>Per Year</option>
   </select>
   </div>
    <div v-if="form.switch == '24'">
    <label class="et">Gas</label>
    
    <div class="form-inline">
    <input type="text" v-model="form.gasspend" class="form-control" placeholder="Cost">
   <select class="form-control">
     <option>Per Month</option>
     <option>Per Quarter</option>
     <option>Per Year</option>
   </select>
   </div>
    
    </div>
</div>
<div v-if="form.opt == 'tOne'">
    <h3>I know how much I use (kWh) </h3>
    <label class="et">Electricity</label>
    <div class="form-inline">
    <input type="text" class="form-control" placeholder="kWh used">
   <select class="form-control">
     <option>Per Month</option>
     <option>Per Quarter</option>
     <option>Per Year</option>
   </select>
   </div>
    <div v-if="form.switch == '24'">
    <label class="et">Gas</label>    <div class="form-inline">
    <input type="text" v-model="form.spend" class="form-control" placeholder="kWh used">
     <select class="form-control">
     <option>Per Month</option>
     <option>Per Quarter</option>
     <option>Per Year</option>
   </select>
   </div>
     </div>
</div>
<div v-if="form.opt == 'O4ne'">
 <div class="middle">
 <h3>How many bedrooms do you have?</h3> 
  <label>

  <input type="radio" name="radio" />
  <div class="back-end box">
 
  <img src="assets/img/icons/home.png">
    <span>1-2 Bedroom</span>
  </div>
</label>

  <label>
  <input type="radio" name="radio"/>
  <div class="back-end box">
  <img src="assets/img/icons/home2.png">
    <span>3-4 Bedroom</span>
  </div>
</label>
<label>
  <input type="radio" name="radio"/>
  <div class="back-end box">
  <img src="assets/img/icons/home3.png">
    <span>5+ Bedroom</span>
  </div>
</label>
</div>
</div>
</div>
</div>
 </section>
 <section v-if="step==5" class="formsections">
 <div class="d-flex justify-content-center">
 <div class="comparisonform w-50">
 <h3>What is your current plan</h3>
 <img src="assets/img/icons/loader.gif" v-if="loading" />
 <div class="middle">
 <label>
<input type="radio" name="radio" v-model="sup" value="British Gas" />
<div class="back-end box3">
<img src="assets/img/logos/british_gas_255x175.png" class="supplier-logo">
 </div>
</label>
<label>
<input type="radio" name="radio" v-model="sup" value="EDF Energy"  />
<div class="back-end box3">
<img src="assets/img/logos/edf_255x175.png" class="supplier-logo">
 </div>
</label>
<label>
<input type="radio" name="radio" />
<div class="back-end box3" v-model="sup" value="E.ON">
<img src="assets/img/logos/eon_255x175.png" class="supplier-logo">
 </div>
</label>
<label>
<input type="radio" name="radio"  v-model="sup" value="npower"/>
<div class="back-end box3">
<img src="assets/img/logos/npower_255x175.png" class="supplier-logo">
 </div>
</label>
<label>
<input type="radio" name="radio"  v-model="sup" value="ScottishPower"/>
<div class="back-end box3">
<img src="assets/img/logos/scottishpower_255x175.png" class="supplier-logo">
 </div>
</label>
<label>
<input type="radio" name="radio" v-model="sup" value="SSE" />
<div class="back-end box3">
<img src="assets/img/logos/sse_255x175.png" class="supplier-logo">
 </div>
</label>
</div>
 

 <label for="supplier">Current Supplier</label>
 <select v-model="sup" class="form-control" :value="getSupplier">
  <option v-for="supplier in suppliers.suppliers" >
    {{ supplier.name}}
  </option>
</select>

<label for="Current Supplier Plan">Current Supplier Plan</label>
 <select v-model="sup" class="form-control" :value="getSupplier">
  <option v-for="supplier in suppliers.suppliers" >
    {{ supplier.name}}
  </option>
</select>
<label for="Plan">Current Supplier Plan</label>
{{currenttariffname}}
</div>
 </section>
 <section v-if="step==6" class="formsections">
  <div class="container">
 <div class="row">
 <div class="col-md-3">
 <div class="editdetails">
 <p class="edit-intro">Your Personal Plan is based on:</p>
 <div class="qt">
 <h4>Plan</h4>
{{sup}}
{{currenttariffname}}
<h4>Usage</h4>
<p>Electricity: {{eleckwUsagePerMonth*12}}</p>
<p>Gas: {{gaskwUsagePerMonth*12}}</p>
<button data-toggle="modal" data-target="#modal_aside_right" class="btn btn-primary" type="button"> Edit Details  </button>
</div>
<div id="modal_aside_right" class="modal fixed-right fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-aside" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Your Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4>Fuel</h4>
        <label class="label-radio-content">
        <input type="radio" name="name">Gas & Electricity</label>
        <label class="label-radio-content"><input type="radio" name="name">Electricity Only</label>

        <h4>Energy Usage</h4>
        <label class="label-radio-content"><input type="radio"> I know how much I spend (£) </label>
        <label class="label-radio-content"><input type="radio"> I know how much I use (kWh) </label>
        <label class="label-radio-content"><input type="radio"> I am not sure</label>
        <br>
        <h4>Plan</h4>
{{sup}}
{{currenttariffname}}
<h4>Usage</h4>
<p>Electricity: {{eleckwUsagePerMonth*12}}</p>
<p>Gas:{{gaskwUsagePerMonth*12}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Update Quote</button>
      </div>
    </div>
  </div> <!-- modal-bialog .// -->
</div> <!-- modal.// -->
</div>
 </div>
 <div class="col-md-9">
 <img src="assets/img/icons/loader.gif" v-if="loading" />
 <div class="container suppliercontainer" v-for="(quote,index) in quotes.tariffs">
    <div class="row">
    <div class="col">
      <p class="suppliertitle">{{quote.tariffName}}</p>

    </div>
    </div>
    <div class="row supplierrow">
        <div class="col">
        <img :src=quote.supplierLogoUrl class="supplier-logo">
        </div>
        <div class="col">
        {{quote.supplierName}}
        </div>
        <div class="col">

        <div class="text-wrapper">
          <div class="small-text top small-bottom-spacing"> Estimated cost </div>
          <div class="large-text"><span class="pound-symbol">£</span>{{quote.annualCost}}</div>
          <div class="small-text"> per year </div>
        </div>
        </div>
        <div class="col">
        <div class="text-wrapper save-wrapper">
          <div class="small-text top small-bottom-spacing"> You Save </div>
          <div class="large-text"><span class="pound-symbol">£</span>{{quote.annualSaving}}</div>
          <div class="small-text"> per year </div>
        </div>

        </div>
        <div class="col">
          <button class="plan-button" v-on:click="nextStep">Choose Plan</button>
            
          <button class="more-info-button" type="button" data-toggle="collapse" :data-target="'#demo'+index"  aria-expanded="false" aria-controls="collapseExample">
            More Info
          </button>
      

        </div>
    </div>
<div class="collapse" :id="'demo'+index">
  <div class="card card-body">
  
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    <table class="styled-table">
    <thead>
        <tr>
            <th></th>
            <th colspan="2">{{sup}}</th>
            <th colspan="2">{{quote.supplierName}}</th>
            
        </tr>
    </thead>
    <tbody>
      
        <tr>
          <td></td>
        <td>Gas</td>
        <td>Elec</td>
        <td>Gas</td>
        <td>Elec</td>
           
         
        </tr>
        <tr class="active-row">
        <td>Tariff Name</td>
                     <td>{{currenttariffname}}</td>
                     <td>{{currenttariffname}}</td>
                     <td>{{quote.tariffName}}</td>
                     <td>{{quote.tariffName}}</td>
        </tr>
        <tr class="active-row">
        <td>Type</td>
                     <td>1</td><td>3</td>
        </tr>
        <tr class="active-row">
        <td>Payment Type Name </td>
                     
        </tr>
        <tr class="active-row">
        <td>Unit Rate</td>
        <td></td>
        <td></td>
        <td>{{quote.costGas.unitRate }}</td>
        <td>{{quote.costElec.unitRate }}</td>
                     
        </tr>
        <tr class="active-row">
        <td>Standing Charge </td>
        <td></td>
        
        <td>1</td>
        <td>{{quote.costGas.standingCharge }}</td>
        <td>{{quote.costElec.standingCharge }}</td>
        </tr>

        <tr>
        <td>Exit Fees </td>
        <td></td>
        <td>{{quote.costElec.exitFees }}</td>
        </tr>
        
        <tr>
        <td>End Date </td>
        <td></td>
        <td>{{quote.endDate}}</td>
        </tr>
        
        <tr>
        <td>Annual Consumption</td>
        <td></td>
        <td></td>
        </tr>
        
        <tr>
        <td>Annual Cost</td>
        <td></td>
        <td></td>
        <td>{{quote.costGas.monthlyCost*12 }}</td>
        <td>{{quote.costElec.monthlyCost*12 }}</td>
        </tr>
        <tr>
        <td>Annual Savings</td>
        <td></td>
        <td></td>
        <td>{{quote.costGas.exitFees }}</td>
        <td>{{quote.costElec.exitFees }}</td>
        </tr>
        <tr>
        <td>Monthly Cost</td>
        <td></td>
        <td></td>
        <td>{{quote.costGas.monthlyCost}}</td>
        <td>{{quote.costElec.monthlyCost }}</td>
        </tr>
 
        <!-- and so on... -->
    </tbody>
</table>

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

 </div>

 </div>

</div>


 </section>
 <section v-if="step==7">
   <div class="comparisonform">
 <h3>Your details </h3>
 <p>This information allows us to set up your new plan and help you switch to another great deal when your contract expires. </p>

 <label for="Name">Name</label>
 <input type="text" class="form-control" v-model="form.name">
 <label for="email">Email</label>
 <input type="text" class="form-control" v-model="form.email">
 <label for="mobile">Mobile Phone no</label>
 <input type="text" class="form-control" v-model="form.mobile">
 <label for="dob">Date of Birth</label>
 <input type="date" class="form-control" v-model="form.dob">
 <label for="employmentstatus">Employment Status</label>
 <select v-model="employmentstatus" class="form-control">
  <option disabled value="" >Please select one</option>
  <option>Employed Full Time</option>
  <option>Employed Part Time</option>
  <option>Self Employed</option>
  <option>Unemployed</option>
  <option>Retired</option>
  <option>Home Maker</option>
  <option>Student</option>
</select>
<label for="residentialstatus">Residential Status</label>
 <select v-model="residentialstatus" class="form-control">
  <option disabled value="" >Please select one</option>
  <option>Home Owner</option>
  <option>Private Tenant</option>
  <option>Local Authority Tenant</option>
  <option>Landlord</option>
 </select>
 </div>
 </section>
 <div class="comparisonform">
  <div class="wrapperbutton">
 <button v-if="step != 1" @click.prevent="prevStep" id="button1">Previous Step</button>
 <button v-if="step != totalsteps" @click.prevent="nextStep" id="button1">Next Step</button>
 <button v-if="step == 7" @click.prevent="sendEnquiry" id="button1">Send Enquiry</button>
</div>
</div>
 </form>
 
 </div>
</div>

  <?php include ('footer.php'); ?>

  <div id="preloader"></div>
  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/jquery/jquery.min.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>
  <script>
  const App =new Vue({
      el:"#app",
      
      data: {
            step:1,
            totalsteps:7,
            form:{
                postcode:null,
                email:null,
                energy:null,
                address:null,
                opt:null,
                phone:null,
                name:null,
                dob:null,
                elecspend:null,
                gasspend:null,
                switch:null,

            },
            loading: true,
            selected:null,
            sup:null,
            users:[],
            quotes:[],
            suppliers:[],
            currentsupplier:null,
            currenttariffname:null,
            eleckwUsagePerMonth:null,
            gaskwUsagePerMonth:null,

      },
      methods:{
                nextStep:function(){
                  this.step++;
                  
                  if(this.step == 5){
                    this.form.energy=580;
                    axios.post('http://ugotechnologies.com/maputilities/test.php', {
                     hasUserAcceptedTermsAndConditions:true,
                    address:{
                                postcode:this.form.postcode,
                                addressLine1:this.form.address
                              },
                            
                    }).then(response => {
                this.quotes = response.data;
                this.sup=response.data.estimate.elec.supplierName;
                this.currenttariffname=response.data.estimate.elec.tariffName;
                this.eleckwUsagePerMonth=response.data.estimate.elec.kwUsagePerMonth;
                this.gaskwUsagePerMonth=response.data.estimate.gas.kwUsagePerMonth;
                this.currentsupplier="British Gas";
                this.loading = false;

                  })
                  }
                },
                prevStep:function(){
                   this.step--;
                },
                sendEnquiry:function(){
                  alert('dfgdgd');
                },
                         
      },
      computed: {
                 getAddress: function() {
                  axios.get('https://api.ideal-postcodes.co.uk/v1/postcodes/'+this.form.postcode+'?api_key=ak_kjwhupurGvFe4vw6yEX17Ow0UEQC1') .then(response => {
                this.users = response.data
                  })
                     },
                     getSupplier: function() {
                  axios.get('http://ugotechnologies.com/maputilities/supplier.php') .then(response => {
                this.suppliers = response.data
                this.currentsupplier=suppliers;
               
                  })
                     }

        },

  });
  </script>

</body>

</html>

Zerion Mini Shell 1.0