{% extends 'layouts/base.html' %}

{% block title %} API Sample {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}


  <div class="container-fluid py-4"> 

    <div class="row mt-4">
        
      <div class="col-lg-12 mb-lg-0 mb-4">
        <div class="card">
          <div class="card-body p-3">
            <div class="row">
              <div class="col-lg-8">
                <div class="d-flex flex-column h-100">
                  <p class="mb-1 pt-2 text-bold">How it works</p>
                  <h5 class="font-weight-bolder">Generated API</h5>
                  <p class="mb-3">
                    This codebase can be used to generate secure APIs using DRF. 
                    Steps to generate a new service:
                    <ul>
                      <li><strong>Step #1</strong> - Edit "apps/models.py" and add a new model</li>
                      <li><strong>Step #2</strong> - Migrate the database (usual steps)</li>
                      <li><strong>Step #3</strong> - Execute "python manage.py generate-api"</li>
                      <li><strong>Step #4</strong> - Enable model in "core/settings.py" - Section "API_GENERATOR"</li>
                      <li><strong>Step #5</strong> - Access the api "http://localhost:8000/api/MODEL_NAME/"</li>
                    </ul>
                  </p>
                  <p>
                    Import the 
                    <a class="text-primary" target="_blank" href="https://github.com/app-generator/django-soft-ui-dashboard/tree/master/media">POSTMAN Sample collection <i class="fa fa-download"></i></a>  
                    and access the 
                    <a target="_blank" class="text-body text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="/api/books/">
                      Generated API
                      <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                    </a>
                  </p>
                </div>
              </div>
              <div class="col-lg-4 ms-auto text-center mt-5 mt-lg-0">
                <div class="bg-gradient-primary border-radius-lg h-100">                
                  <div class="position-relative d-flex align-items-center justify-content-center h-100">
                    <img class="w-100 position-relative z-index-2 pt-4" src="{{ ASSETS_ROOT }}/img/illustrations/rocket-white.png" alt="rocket">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="row">

      <div class="col-md-12 mt-4">
        <div class="card">
          <div class="card-header text-center pb-0 px-3">
            <h6 class="mb-0">
                <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    <i class="fas fa-plus text-success me-2" aria-hidden="true"></i>Add Item
                </a>
            </h6>
          </div>
          <div class="card-body pt-4 p-3">
            <ul class="list-group">
              <li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg">
                <div class="d-flex flex-column">
                  <span class="text-xs">Empty</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </div>

    {% include "includes/footer.html" %}

  </div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="form">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
          <div class="modal-body">
              <input id="id" name="id" type="hidden" >
            <div class="mb-3">
                <label for="name">Name</label>
                <input id="name" class="form-control" name="name">
            </div>
              <div id="alert" class="d-none alert alert-danger text-light fw-bold">alert</div>
          </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <input type="submit" class="btn btn-primary" value="Save changes">
      </div>
    </form>
    </div>
  </div>
</div>
{% endblock content %}

<!-- Specific JS goes HERE --> 
{% block javascripts %}
<script>
    let requestAction = 'post' // for update/add record
    let data = []
    const modelName = 'books'
    const token = localStorage.getItem('token') || ''
    const itemContainer = document.querySelector('.list-group')
    fetch(`/api/${modelName}/`,{
        method: 'GET',
        headers: {
            'Authorization': `token ${token}`
        }
    })
        .then((response) => {
                if(!response.ok)
                    return response.json().then(text => { throw new Error(text) })
                else
                    return response.json()
            })
        .then((res) => {
            itemContainer.innerHTML = ''
            data = res.data
            res.data.forEach((book) => {
                    const item = `<li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg">
                        <div class="d-flex flex-column">
                          <span class="text-xs">id: <span class="text-dark ms-sm-2 font-weight-bold" id="model-id">${book.id}</span></span>
                          <span class="text-xs">name: <span class="text-dark ms-sm-2 font-weight-bold" id="model-name">${book.name}</span></span>
                        </div>
                        <div class="ms-auto text-end">
                          <a class="btn btn-link text-danger text-gradient px-3 mb-0 delete" href="javascript:;" id="${book.id}"><i class="far fa-trash-alt me-2"></i>Delete</a>
                          <a class="btn btn-link text-dark px-3 mb-0 edit" href="javascript:;" id="${book.id}"
                                data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-pencil-alt text-dark me-2" aria-hidden="true"></i>Edit</a>
                        </div>
                      </li>`

                    itemContainer.innerHTML += item
                })
        })
        .catch((err) => {
            console.log(err)
        })

        document.getElementById('form').onsubmit = (e) => {
            e.preventDefault()
            const modelName = 'books'
            const formData = new FormData(e.target)
            let url = `/api/${modelName}/`
            const alert =document.getElementById('alert')
            alert.textContent = ''
            if (requestAction === 'put')
                url += `${formData.get('id')}/`
            else
                formData.delete('id')
            fetch(url,{
                method: requestAction,
                body: formData,
                headers: {
                    'Authorization': `token ${token}`
                }
            })
                .then((response) => {
                    if(!response.ok)
                        return response.text().then(text => { throw new Error(text) })
                    else
                        return response.text()
                })
                .then(res => {
                    location.reload()
                    console.log(res)
                    if (!alert.classList.contains('d-none'))
                        alert.classList.add('d-none')
                })
                .catch(err => {
                    const errors = JSON.parse(err.toString().replace('Error: ','')).message
                    alert.classList.remove('d-none')
                    for (const key in errors)
                        alert.textContent += key + ": " + errors[key]
                })
        }

</script>
<script src="{{ ASSETS_ROOT }}/js/model.js"></script>


{% endblock javascripts %}