{% include 'mfire/include/header.html' %}
   {% include 'mfire/include/topbar.html' %}
    {% include 'mfire/include/sidebar.html' %}
<!-- Content Wrapper. Contains page content -->
<style>
    .checkbox{
        width:10px;
    }
</style>
<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>{% if emp %} Update {% else %}Add {% endif %} Inspection</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/mfire/dashboard/">Dashboard</a></li>
                        <li class="breadcrumb-item">Inspection</li>
                        <li class="breadcrumb-item active"></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 Inspection</h3>
                <div class="card-tools">
                    <a href="/mfire/c_inspection/" 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">
                        {% if emp %}
                        <form method="post"  autocomplete="off">
                            {% csrf_token %}

                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="staff" class="">Select Client</label>
                                    <select class="form-control" name="client" id="client">
                                        <option value=""></option>
                                        {% for c in clients %}
                                        <option value="{{c.id}}">{{c.company}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="staff" class="">Select Employee</label>
                                    <select class="form-control" name="employee" id="employee">
                                        <option value=""></option>
                                        {% for e in allemp %}
                                        <option value="{{e.id}}">{{e.email}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="inspection_date" class="">Inspection Date</label>
                                    <input type="Date" name="inspection_date" id="inspection_date" class="form-control" value="{{emp.first_name}}" required>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="message" class="">Message</label>
                                    <textarea id="summernote" name="message"> </textarea>
                                </div>
                                
                            </div>

                            <button type="button" class="btn btn-primary" onclick="updatecompanyinspection()">Create</button>
                            <p id="msg"></p>
                        </form>
                        {% else %}
                        <form method="post"  autocomplete="off">
                            {% csrf_token %}

                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="staff" class="">Select Client</label>
                                    <select class="form-control" name="client" id="client">
                                        <option value=""></option>
                                        {% for c in clients %}
                                        <option value="{{c.id}}">{{c.company}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="staff" class="">Select Employee</label>
                                    <select class="form-control" name="employee" id="employee">
                                        <option value=""></option>
                                        {% for e in allemp %}
                                        <option value="{{e.id}}">{{e.email}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="inspection_date" class="">Inspection Date</label>
                                    <input type="Date" name="inspection_date" id="inspection_date" class="form-control" value="{{emp.first_name}}" required>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="message" class="">Message</label>
                                    <textarea id="summernote" name="message"> </textarea>
                                </div>
                                

                            </div>

                            <button type="button" class="btn btn-primary" onclick="companyinspection()">Create</button>
                            <p id="msg"></p>
                        </form>
                        {% endif %}
                    </div>
                </div>
            <span id="msg" class="pl-5 text-bold"></span>
            </div>
            <!-- /.card-body title="Please use a 10 digit telephone number with no dashes or dots" pattern="[0-9]{10}"-->
        </div>
        <!-- /.card -->

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

<script>

function companyinspection(){
    var client = document.getElementById("client").value;
    var employee = document.getElementById("employee").value;
    var inspection_date = document.getElementById("inspection_date").value;
    var message = document.getElementById("summernote").value;
    
    if(client==''){
        document.getElementById("msg").innerText  = 'Please Select Client';
        document.getElementById("msg").style.color  = 'red';
    }else if(employee==''){
        document.getElementById("msg").innerText  = 'Please Select Employee';
        document.getElementById("msg").style.color  = 'red';
    }else if(inspection_date==''){
        document.getElementById("msg").innerText  = 'Please Enter Inspection Date';
        document.getElementById("msg").style.color  = 'red';
    }else{
        document.getElementById("msg").innerText  = 'Please Wait';
        jQuery('#tickebutton').attr('disabled', true);
        
        $.ajax({
                url: "/mfire/add_inspection/",
                headers: {'X-CSRFToken': '{{ csrf_token }}'},
                method:'POST',
                data: {
                  'client': client,
                  'employee':employee,
                  'inspection_date': inspection_date,
                  'message':message,
                },
                success: function (data) {
                    if(data.status == 'success'){
                          document.getElementById("msg").innerText  = 'Company Inspection Create Success.';
                          document.getElementById("msg").style.color  = 'green';
                          document.getElementById("tickebutton").disabled = true;
                          window.location.replace('/mfire/c_inspection/');
                        //   window.setTimeout(function(){window.location.href = "/mfire/c_inspection/";}, 5000);
                    }
                }
             });
    }

}

function updatecompanyinspection(){
        var client = document.getElementById("client").value;
    var employee = document.getElementById("employee").value;
    var inspection_date = document.getElementById("inspection_date").value;
    var message = document.getElementById("summernote").value;
    
    if(client==''){
        document.getElementById("msg").innerText  = 'Please Select Client';
        document.getElementById("msg").style.color  = 'red';
    }else if(employee==''){
        document.getElementById("msg").innerText  = 'Please Select Employee';
        document.getElementById("msg").style.color  = 'red';
    }else if(inspection_date==''){
        document.getElementById("msg").innerText  = 'Please Enter Inspection Date';
        document.getElementById("msg").style.color  = 'red';
    }else{
        document.getElementById("msg").innerText  = 'Please Wait';
        jQuery('#tickebutton').attr('disabled', true);
        
        $.ajax({
                url: "/mfire/add_inspection/",
                headers: {'X-CSRFToken': '{{ csrf_token }}'},
                method:'POST',
                data: {
                  'client': client,
                  'employee':employee,
                  'inspection_date': inspection_date,
                  'message':message,
                },
                success: function (data) {
                    if(data.status == 'success'){
                          document.getElementById("msg").innerText  = 'Company Inspection Updated Success. Please wait Redirecting page';
                          document.getElementById("msg").style.color  = 'green';
                          document.getElementById("tickebutton").disabled = true;
                          //window.location.replace('/mfire/c_inspection/');
                          window.setTimeout(function(){window.location.href = "/mfire/c_inspection/";}, 5000);
                    }
                }
             });
    }
}

</script>
{% include 'mfire/include/footer.html' %}