<h3>{{customer.name}}</h3>
<hr>
<a href="#" class="btn btn-success float-right" id='submit'>Update Customer</a><br><br>
<div class="row">
  <div class="col">
    <ul class="list-group bg-dark text-white">
      <li class="list-group-item bg-dark text-white">Name
        <input type="text" class='form-control name' value='{{customer.name}}'>
      </li>
      <li class="list-group-item bg-dark text-white">
        <a href="#" id='addEmail' class="btn btn-sm btn-success mb-1">+</a> Email
          {{#each customer.email}}
            <input type="text" class='form-control email mt-1' value="{{this}}">
          {{/each}}
      </li>
      <li class="list-group-item bg-dark text-white">
        <a href="#" id='addPhone' class="btn btn-sm btn-success mb-1">+</a> Phone
          {{#each customer.phone}}
          <input type="text" class='form-control phone mt-1' value='{{this}}'>
          {{/each}}
      </li>
      <li class="list-group-item bg-dark text-white">
        Address
        <ul>
          <li><input type="text" class='form-control mb-1 street' value='{{customer.address.street}}'></li>
          <li><input type="text" class='form-control mb-1 city' value='{{customer.address.city}}'></li>
          <li><input type="text" class='form-control mb-1 state' value='{{customer.address.state}}'></li>
          <li><input type="number" class='form-control zip' value='{{customer.address.zip}}'></li>
        </ul>
      </li>
      <li class="list-group-item bg-dark text-white">Balance</li>
    </ul>
  </div>
  <div class="col">
    <ul class="list-group bg-dark text-white">
      {{#each customer.tickets}}
        <li class="list-group-item bg-dark text-white">
          {{this}}
        </li>
      {{/each}}
    </ul>
  </div>
</div>
<script>
$('#addEmail').click(()=>{
  $('#addEmail').parent().append(`<input type="text" class='form-control mt-1 email' value=''>`)
})
$('#addPhone').click(()=>{
  $('#addPhone').parent().append(`<input type="text" class='form-control mt-1 phone' value=''>`)
})
$('#submit').click(()=>{
  var id = '{{customer._id}}'
  var customer = {
    name:$('.name').val(),
    email:[],
    phone:[],
    address:{
      street:$('.street').val(),
      city:$('.city').val(),
      state:$('.state').val(),
      zip:$('.zip').val()
    }
  }
  $('.phone').each(function(){customer.phone.push($(this).val())})
  $('.email').each(function(){customer.email.push($(this).val())})
  $.ajax({
    type: 'POST',
    data: JSON.stringify({id:id,customer}),
    contentType: 'application/json',
    url: '/customers/edit',
    success: data=>{
      if(!data.err){
        alert('Customer Updated!')
        window.location.href=`/customers/view/${id}`
      }
      else alert(data.err)
    }
  });
})
</script>
