{% include 'vendor/include/header.html' %}
   {% include 'vendor/include/topbar.html' %}
    {% include 'vendor/include/sidebar.html' %}
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">

            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Create Ticket</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/vendor/dashboard/">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="#">Ticket</a></li>
                        <li class="breadcrumb-item active">Create</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Default box -->
        <div class="card">
            <!--<div class="card-header">-->
            <!--    <h3 class="card-title">Create Advertiser</h3>-->
            <!--    <div class="card-tools">-->
            <!--        <a href="/mfire//" class="btn btn-sm btn-primary"><i class="fas fa-long-arrow-alt-left"></i> Go Back</a>-->
            <!--    </div>-->
            <!--</div>-->
            <div class="card-body">

                <div class="row">
                    <div class="col-md-12">
                        
                        <form method="post" action="/vendor/addtickete/" enctype="multipart/form-data">
                            {% csrf_token %}

                            <div class="form-row">

                                <input type="hidden" name="user" id="user" class="form-control" value="{{request.user.id}}" readonly>
                                <div class="form-group col-md-4">
                                    <label for="client_name" class="">Client name *</label>
                                    <input type="text" name="client_name" id="client_name" class="form-control" value="{{request.user.company}}" readonly>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="modelno" class="">Model Number *</label>
                                    <input type="text" name="modelno" id="modelno" oninput="clientdata()" class="form-control" required>
                                    <span id="modelmsg" style="color:red;"></span>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="subject" class="">subject *</label>
                                    <input type="text" name="subject" id="subject" class="form-control" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="assign_emp" class=""> Employee Name *</label>
                                    <input type="text" id="assign_emp_name" class="form-control" readonly required>
                                    <input type="hidden" name="assign_emp" id="assign_emp" class="form-control" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="assignnote" class=""> Note (Mention short note for support staff)</label>
                                    <input type="text" name="assignnote" id="assignnote" class="form-control">
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="img" class="">Image</label>
                                    <input type="file" name="img" id="img" class="form-control">
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="img" class="">Priority</label>
                                    <select type="text" name="priority" class="form-control">
                                    <option value="Low">Low</option>
                                    <option value="Medium">Medium</option>
                                    <option value="High">High</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-12">
                                    <label for="message" class="">Message *</label>
                                    <textarea id="summernote" name="message" required>    </textarea>
                                </div>

                                
                   

                        </div>
                        
                           

                            <button type="submit" class="btn btn-primary" id="tickebutton">Create</button>

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

            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<script>
  $(function () {
    // Summernote
    $('#summernote').summernote()

    // CodeMirror
    CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
      mode: "htmlmixed",
      theme: "monokai"
    });
  })
</script>
<script>
    function clientdata(){
            var modelno = document.getElementById("modelno").value;
            var client = document.getElementById("user").value;
              $.ajax({
                url: "/loadassignemp/",
                method:'GET',
                data: {
                  'modelno': modelno,
                  'client': client
                },
                success: function (data) {
                    //console.log(data);
                      if(data.status == '0'){
                          document.getElementById("modelmsg").innerText  = 'Wrong Modelno';
                          //alert('Wrong Modelno');
                          document.getElementById("assign_emp").value = '';
                          document.getElementById("tickebutton").disabled = true;
                      }else{
                        document.getElementById("assign_emp").value = data.email;
                        document.getElementById("assign_emp_name").value = data.empid;
                        document.getElementById("tickebutton").disabled = false;
                        document.getElementById('modelmsg').innerHTML = "";
                      }
                }
             });
      }
</script>

{% include 'vendor/include/footer.html' %}