{% include 'mfire/include/header.html' %}
   {% include 'mfire/include/topbar.html' %}
    {% include 'mfire/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>{% if clients %} Update {% else %} Add {% endif %} Officer</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/mfire/deshboard/">Dashboard</a></li>
                        <li class="breadcrumb-item">Officer</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 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">
                        {% if clients %}
                        <form method="post" action="/mfire/update_client/">
                            {% csrf_token %}

                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="company" class="">Company Name</label>
                                    <input type="text" name="company" id="company" class="form-control" value="{{clients.company}}" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="email" class="">Email</label>
                                    <input type="email" name="email" id="email" class="form-control" value="{{clients.email}}" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="first_name" class="">First Name</label>
                                    <input type="text" name="first_name" id="first_name" class="form-control" value="{{clients.first_name}}" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="last_name" class="">Last Name</label>
                                    <input type="text" name="last_name" id="last_name" class="form-control" value="{{clients.last_name}}" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="phone" class="">Phone Number</label>
                                    <input type="tel" name="phone" id="phone" class="form-control" value="{{clients.phone}}">
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="address" class="">Full Address</label>
                                    <input type="text" name="address" id="address" class="form-control" value="{{clients.location}}" required>
                                </div>
                                
                                <input type="hidden" name="user_type" value="2" class="form-control" required>
                                <input type="hidden" name="user_id" value="{{clients.id}}" class="form-control" required>

                                <div class="form-group col-md-4">
                                        <label for="location" class="">Location</label>
                                        {% for i in clients.clientlocation.all %}
                                            <input type="text" class="form-control" name="location[]" value="{{i.cl_location}}">
                                            <!-- <a href="/deleteclientlocation?l={{i.id}}&u={{clients.id}}" class="btn btn-danger">Delete</a><br><br> -->
                                        {% endfor %}
                                        <!-- <input type="button" id="add_location" class="add_field_button" value="Add More Sub location">
                                        <div class="col-sm-12" id="key_feature_input_field_div"></div> -->
                                </div>
                                
                                
                            </div>
                                <button type="submit" class="btn btn-primary">Update</button>
                            
                        </form>
                        {% else %}
                        <form method="post">
                            {% csrf_token %}

                            <div class="form-row">
                                
                                <div class="form-group col-md-4">
                                    <label for="company" class="">Company Name</label>
                                    <input type="text" name="company" id="company"  class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="email" class="">Email</label>
                                    <input type="email" name="email" id="email"   class="form-control" required>
                                    <spam id="emailmsg"></spam>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="password" class="">Password</label>
                                    <input type="password" name="password" id="password" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="first_name" class="">First Name</label>
                                    <input type="text" name="first_name" id="first_name" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="last_name" class="">Last Name</label>
                                    <input type="text" name="last_name" id="last_name" class="form-control" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="phone" class="">Phone Number</label>
                                    <input type="tel" name="phone" id="phone" class="form-control">
                                    <spam id="phonemsg"></spam>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="address" class="">Full Address</label>
                                    <input type="text" name="address" id="address" class="form-control" required>
                                </div>
                                <input type="hidden" name="user_type" id="user_type" value="2" class="form-control" required>

                                <div class="form-group col-md-4">
                                    <label for="location" class="">Location</label>
                                        <input type="text" class="form-control" name="location[]" id="location[]"><br>
                                    <!-- <input type="button" id="add_location" class="add_field_button" value="Add More Sub location">
                                    <div class="col-sm-12" id="key_feature_input_field_div"></div> -->
                            </div>
                           </div>
                            <button type="button" class="btn btn-primary" onclick="getInputValue()" id="tickebutton">Create</button>
                            
                        </form>
                        {% endif %}
                    </div>
                  </div>  
                </div>
                
                <span id="msg" class="pl-5 text-bold"></span>
            </div>
            <!-- /.card-body -->
     

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

 <script>
    var count1 = 1;
    var count2 = 1;
    $('#add_location').click(function () {
        $('#key_feature_input_field_div').append('<div class="row" style="margin-top:10px;" id="con1'+count1+'">'+
                                        '<div class="col-sm-9">'+
                                            '<input type="text" class="form-control" name="location[]" placeholder="Location'+count1+'" required/>' + 
                                        '</div>'+
                                        '<div class="col-sm-3">'+
                                            '<button type="button" class="btn btn-danger" id="btnRemove1'+count1+'" onclick="removeBtn(1'+count1+')">Remove</button>'+
                                        '</div>'+
                                    '</div>'
                                    );
        
        count1++;
    });
     function removeBtn(id) 
    {
        $('#con'+id).remove();
    }

function getInputValue(){
    var company = document.getElementById("company").value;
    var email = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;
    var password = document.getElementById("password").value;
    var location = document.getElementById("location[]").value;
    var first_name = document.getElementById("first_name").value;
    var last_name = document.getElementById("last_name").value;
    var user_type = document.getElementById("user_type").value;
    var address = document.getElementById("address").value;
    var staff = '1';

    
    if(company==''){
        document.getElementById("msg").innerText  = 'company Name Required';
        document.getElementById("msg").style.color  = 'red';
    }else if(email==''){
        document.getElementById("msg").innerText  = 'Email ID Required';
        document.getElementById("msg").style.color  = 'red';
    }else if(password==''){
        document.getElementById("msg").innerText  = 'Password Required';
        document.getElementById("msg").style.color  = 'red';
    }else{
        document.getElementById("msg").innerText  = 'Please Wait';
        jQuery('#tickebutton').attr('disabled', true);
        $.ajax({
                    url: "/mfire/register/",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'},
                    method:'POST',
                    data: {
                      'company': company,
                      'email': email,
                      'phone':phone,
                      'password': password,
                      'location':location,
                      'first_name':first_name,
                      'last_name':last_name,
                      'user_type':user_type,
                      'address':address,
                      'staff':staff,
                    },
                    success: function (data) {
                       
                          if(data.status == 'email'){
                              document.getElementById("msg").innerText  = 'Email Already Register';
                              document.getElementById("msg").style.color  = 'red';
                              document.getElementById("tickebutton").disabled = false;
                          }else if(data.status == 'phone'){
                            document.getElementById('msg').innerHTML = "Phone Number Already Register";
                            document.getElementById("msg").style.color  = 'red';
                            document.getElementById("tickebutton").disabled = false;
                          }else if(data.status == 'success'){
                              document.getElementById("msg").innerText  = 'Register Success, Please Wait Redirecting Page';
                              document.getElementById("msg").style.color  = 'green';
                              document.getElementById("tickebutton").disabled = true;
                              window.location.replace('/mfire/all-Officer/');
                          }
                    }
                });
    }

}

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