<h3>Edit Ticket</h3>
<span id='ticketId'>{{ticket._id}}</span>
<hr>
<a id='submit' class="btn btn-success float-right">Update Ticket</a>
<div class="row mb-3">
  <div class="col bg-dark text-white">
    <div class="card bg-dark text-white">
      <div class="card-body">
        <input type="text" class="form-control mb-1 make" value='{{ticket.device.make}}'>
        <input type="text" class="form-control mb-1 model" value='{{ticket.device.model}}'>
        <input type="text" class="form-control mb-1 carrier" value='{{ticket.device.carrier}}'>
        <input type="text" class="form-control mb-1 serial" value='{{ticket.device.serial}}'>
        <select class='form-control mb-1 simIncluded'>
          <option value='{{ticket.device.simIncluded}}' selected>{{ticket.device.simIncluded}}</option>
          <option disabled>-----</option>
          <option value='true'>True</option>
          <option value='false'>False</option>
        </select>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script>
  $('#submit').click(()=>{
    var id = '{{ticket._id}}';
    var ticket ={
      device:{
        make:$('.make').val(),
        model:$('.model').val(),
        carrier:$('.carrier').val(),
        serial:$('.serial').val(),
        simIncluded:$('.simIncluded').val()
      }
    };
    $.ajax({
      type: 'POST',
      data: JSON.stringify({id:id,ticket}),
      contentType: 'application/json',
      url: '/tickets/edit',
      success: data=>{
        if(!data.err){
          alert('Ticket Updated!')
          window.location.href=`/tickets/view/${id}`
        }
        else alert(data.err)
      }
    });
  })
</script>
