{% include 'main-nav.html' %}
{% block content %}
{% load static %}
            <div class="inbox_content">
                <div class="card inbox">
                    <div class="d-flex justify-content-between action_bar">
                        <div>
                            <button type="button" class="btn btn-icon btn-primary"><i class="fe fe-rotate-cw"></i></button>
                        </div>
                        <div>
                            <a href="#" class="btn btn-outline-primary"><i class="fe fe-arrow-left"></i></a>
                            <a href="#" class="btn btn-outline-primary"><i class="fe fe-arrow-right"></i></a>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                              Settings
                            </button>
                        </div>
                    </div>

                    <div class="section-body" id="david">
            <div class="container-fluid">                
                <!-- Date Picker -->
                <div class="row clearfix row-deck">
                  <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                          <nav class="sidebar-nav">
                          <ul class="metismenu mt-2">
                              <li class="active"><a href="app-email.html"><i class="icon-envelope"></i><span>Inbox</span> <span class="badge badge-primary badge-pill ml-2">14</span></a></li>
                              <li><a href="javascript:void(0);"><i class="icon-star"></i><span>Starred</span></a></li>
                              <li><a href="javascript:void(0);"><i class="icon-clock"></i><span>Snoozed</span></a></li>
                              <li><a href="javascript:void(0);"><i class="icon-cursor"></i><span>Sent</span></a></li>
                              <li><a href="javascript:void(0);"><i class="icon-envelope-open"></i><span>Draft</span></a></li>
                              <li><a href="javascript:void(0);"><i class="icon-action-redo"></i><span>Outbox</span></a></li>
                              <li><a href="javascript:void(0);"><i class="icon-trash"></i><span>Trash</span></a></li>                
                          </ul>
                      </nav>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">New Quick Message</h3>
                            </div>
                            <div class="card-body">
                                <form id="send_sms">
                                  <div class="form-group">
                                    <label for="exampleFormControlInput1">Phone</label>
                                    <input type="text" id="phone" class="form-control" placeholder="25470000000" required>
                                  </div>
                                  <div class="form-group">
                                    <label for="exampleFormControlSelect1">Select Draft</label>
                                    <select class="form-control" id="myselect">
                                        <option></option>
                                        <option id="select">Select</option>
                                    </select>
                                  </div>
                                  <div class="form-group">
                                    <label for="exampleFormControlInput1">Draft Message</label>
                                    <input type="text" id="myinput" class="form-control" >
                                  </div>
                                  <div class="form-group">
                                    <label for="exampleFormControlTextarea1">Text Message:</label>
                                    <textarea class="form-control" id="message" rows="3"></textarea>
                                  </div>

                                  <div class="form-group">
                                    <button id="btn1" type="submit" class="btn btn-primary">Send </button>
                                  </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Create Draft</h3>
                            </div>
                            <div class="card-body">
                                <form id="draft" method="POST">
                                  <div class="form-group">
                                    <label for="exampleFormControlInput1">Title</label>
                                    <input type="text" id="title" class="form-control" placeholder="title" required>
                                  </div>
                                  <div class="form-group">
                                    <label for="exampleFormControlTextarea1">Message:</label>
                                    <textarea class="form-control" id="msg" rows="3" required></textarea>
                                  </div>
                                    <div class="form-group">
                                    <button  id="btn" type="submit" class="btn btn-primary">New Draft </button>
                                  </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>                
                </div>
                    
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        
        <h5 class="modal-title" id="exampleModalLabel">Settings</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="success"></div>
         <form method="POST" id="post-form1">
            {% csrf_token %}
          <div class="row">
            <div class="col">
                <label>Username</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="username" value="{{username}}" required >
            </div>
            <div class="col">
                  <label>Password</label>
              <input type="text" class="form-control" id="password" name="password" placeholder="password" value="{{password}}"required>
            </div>
          </div>
            <div class="form-group">
            <label>SenderId</label>
            <input type="text" class="form-control"  id="senderid" name="senderid" placeholder="senderid" value="{{senderid}}" required>
          </div>
          <button id="product_id" type="submit" class="btn btn-primary"><i class="fa fa-plus"></i>Edit</a></button>
        </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<script>
$(document).on('submit', '#post-form1',function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "bulksms" %}',
        beforeSend: function() { 
          $("#product_id").html('<option> updating...</option>');
          $("#product_id").prop('disabled', true); // disable button
        },
        data:{
            username:$('#username').val(),
            password:$('#password').val(),
            senderid:$('#senderid').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
       success: function (data) {
       swal("Settings Saved!");
      var temp='<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Success!</strong> user added successfully! </div>';
      var btn='<i class="fa fa-plus"></i> Add New';
      $("#product_id").html('');
      $("#product_id").append(btn);
      $("#product_id").prop('disabled', false);
      window.location.href = "";
        
      }
       
    });
});

$(document).on('submit', '#draft',function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "draft" %}',
        beforeSend: function() { 
          $("#btn").html('<option> creating...</option>');
          $("#btn").prop('disabled', true); // disable button
        },
        data:{
            title:$('#title').val(),
            msg:$('#msg').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
       success: function (data) {
       swal("Message Saved to Draft!");
      var temp='<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Success!</strong> user added successfully! </div>';
      var btn='<i class="fa fa-plus"></i> Add New';
       //$("#success").append(temp);
      $("#btn").html('');
      $("#btn").append(btn);
      $("#btn").prop('disabled', false);
        $("#send_sms")[0].reset();
       window.location.href = "";
      }
       
    });
});
$(document).on('submit', '#send_sms',function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "send_sms" %}',
        beforeSend: function() { 
          $("#btn1").html('<option> sending sms..</option>');
          $("#btn1").prop('disabled', true); // disable button
        },
        data:{
            phone:$('#phone').val(),
            message:$('#message').val(),
            myinput:$('#myinput').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
       success: function (data) {
       swal("Message sent successfully!");
      var temp='<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Success!</strong> user added successfully! </div>';
      var btn='Send';
       //$("#success").append(temp);
      $("#btn1").html('');
      $("#btn1").append(btn);
      $("#btn1").prop('disabled', false);
        $("#send_sms")[0].reset();
       
      }
       
    });
});
$('#myselect').on('change', function(){
   $('#myinput').val($(this).val());
  })
  $('#myselect').change();
$(document).ready(function(){
            $.ajax({
                type:'GET',
                url : "{% url 'draft_all' %}",
                success: function(response){
                    $("#myselect").empty();
                    for (var key in response.data)
                    {
                    var temp2="Select";
                     var temp="<option>"+response.data[key].value+"</option>";
                     $("#myselect").append(temp);
                     $("#select").append(temp2);
                      
                    }

                },
                error: function(response){
                    }
        });

    });

</script>


<script>
$(document).ready(function() {
    "use strict";

    $('.email_page .inbox_body .right_chat li a').on('click', function() {
		$('.email_page .inbox_body .inbox_content').toggleClass('open');
    });
});
</script>
</body>
</html>
{%endblock%}