{% 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 %} Operator</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">Operator</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="/user/advertiser/advertiser_create/" 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" action="/mfire/updateemp/" autocomplete="off">
                            {% csrf_token %}

                            <div class="form-row">

                                <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="{{emp.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="{{emp.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="{{emp.phone}}">
                                </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="{{emp.email}}" required>
                                </div>
                                <!-- <div class="form-group col-md-4">
                                    <label for="staff" class="">Is Admin</label>
                                    <select class="form-control" name="staff" id="staff">
                                        <option value="0" {% if emp.is_staff == '0' %} Selected {% endif %}>No</option>
                                        <option value="1" {% if emp.is_staff == '1' %} selected {% endif %}>Yes</option>
                                    </select>
                                </div> -->

                                    <input type="hidden" name="user_type" value="1" class="form-control" required>
                                     <input type="hidden" name="user_id" value="{{emp.id}}" class="form-control" required>
                            </div>

                            <button type="submit" class="btn btn-primary">Update</button>

                        </form>
                        <!--action="/mfire/register/"-->
                        {% else %}
                        <form method="post">
                            {% csrf_token %}

                            <div class="form-row">
                                <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">
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="email" class="">Email</label>
                                    <input type="email" name="email" id="email" class="form-control" autocomplete="off" required>
                                </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>
                             <input type="hidden" name="user_type" id="user_type" value="1" class="form-control">
                             <input type="hidden" name="staff" id="staff" value="0" class="form-control">
                            <button type="button" class="btn btn-primary" onclick="getInputValue()" id="tickebutton">Create</button>

                        </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 getInputValue(){
    var email = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;
    var password = document.getElementById("password").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 staff = document.getElementById("user_type").value;
    
    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 if(first_name=='' || last_name ==''){
        document.getElementById("msg").innerText  = 'Name 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: {
                  'email': email,
                  'phone':phone,
                  'password': password,
                  'first_name':first_name,
                  'last_name':last_name,
                  'user_type':user_type,
                  '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-Operator/');
                      }
                }
             });
             
    }

}

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