{% extends "DAIManagementApp/base.html" %}
{% block content %}

<div class="app-content">
    <div class="side-app">

    <div class="page-header">
        <div>
            <h1 class="page-title">New Agency</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Agency </a></li>
                <li class="breadcrumb-item active" aria-current="page">New Agency </li>
            </ol>
        </div>


    </div>

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

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Info About The Agency</h3>
                </div>
                <div class="card-body">
                    <div class="row row-sm">
                        <div class="col-lg">
                            <label class="form-label">Name</label>
                            <input id="name_agency" class="form-control mb-4" placeholder="Agency Name" name="name_agency" type="text">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Description </label>
                            <textarea id="description_agency" name="description_agency" class="form-control" rows="3" spellcheck="false" data-gramm="false"></textarea>
                        </div>
                    </div>
                    <br><br>
                 <button id="btn_agency" type="button"  style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>

                </div>

            </div>

            </form>


        </div><!-- COL END -->
    </div>

</div>
</div>

<script type="text/javascript">

  $('#btn_agency').click(function(){
      var url = $("#indexForm3").attr("send-agency-url");
      var name_agency = document.getElementById("name_agency").value;
      console.log(name_agency)
      var description_agency = document.getElementById("description_agency").value;
      console.log(description_agency)

      $.ajax({
         url: "{% url 'add_agency' %}",
         type: 'POST',
         data: {
           'name_agency': name_agency,
           'description_agency' : description_agency,
           csrfmiddlewaretoken: '{{ csrf_token }}'
         },
         success: function (data) {
           console.log("Successfully");
              Swal.fire(
                  'Added!',
                  'Your Agency has been Successfully Added.',
                  'success'
              )
              document.getElementById("name_agency").value="";
              description_agency = document.getElementById("description_agency").value="";
         }
       });
  });

</script>

{% endblock content %}