{% extends "data_entry/base.html" %}

{% block page_content %}
<form id="form">

    <input type="text" id="id">
    <input type="text" id="color">
    <input type="text" id="module">
    <input type="text" id="levelName">


    <div id="level"></div>

    <div id="standard"></div>

    <div class="input-group mb-3 mt-5">
        <span class="input-group-text">Title</span>
        <input name="heading1" id="heading1" type="text" class="form-control" placeholder="Title" aria-label="Title" aria-describedby="heading1"
        required >
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">Sub-Title 1</span>
        <input name="heading2" id="heading2" type="text" class="form-control" placeholder="Sub-Title (If exists)" aria-label="Sub-Title"
            aria-describedby="heading2">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">Sub-Title 2</span>
        <input name="heading3" id="heading3" type="text" class="form-control" placeholder="Sub-Title (If exists)" aria-label="Sub-Title"
            aria-describedby="heading3">
    </div>

    <div class="input-group mb-3">
        <span class="input-group-text">Sub-Title 3</span>
        <input name="heading4" id="heading4" type="text" class="form-control" placeholder="Sub-Title (If exists)" aria-label="Sub-Title"
            aria-describedby="heading4">
    </div>


    <div class="input-group mb-3">
        <span class="input-group-text">Paragraph</span>
        <div  name="paragraph" class="form-control" aria-label="Paragraph" id="paragraph" contenteditable></div>
    </div>

   

    <div class="input-group mb-3">
        <span class="input-group-text" >Page Number</span>
        <input name="pageNum" id="pageNum" type="text" class="form-control" placeholder="Page number" aria-label="Sub-Title"
            aria-describedby="pageNum" required>
    </div>
    

    <div class="col-12 mt-5">
        <button class="btn btn-primary" type="submit">Save</button>
    </div>
</form>


    <script type="text/javascript">
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        const csrftoken = getCookie('csrftoken');

        var level = {{ level }}
        var standard = '{{ standard }}'
        var pk = {{ pk }}
        console.log(level, standard, pk)
        getContent(level, standard, pk)
        function getContent(level, standard, pk) {
            var idDiv = document.getElementById('id')
            var colorDiv = document.getElementById('color')
            var moduleDiv = document.getElementById('module')
            var levelNameDiv = document.getElementById('levelName')
            var levelDiv = document.getElementById('level')
            var standardDiv = document.getElementById('standard')
            var heading1Div = document.getElementById('heading1')
            var heading2Div = document.getElementById('heading2')
            var heading3Div = document.getElementById('heading3')
            var heading4Div = document.getElementById('heading4')
            var paragraphDiv = document.getElementById('paragraph')
            var pageNumberDiv = document.getElementById('pageNum')
            var url = 'http://127.0.0.1:8000/api/content-detail/' + level + '/' + standard + '/' + pk
            fetch(url)
                .then((resp) => resp.json())
                .then(function (data) {
                    console.log(data)
                    var levelName = `<h1 >Level: <span style='color:${data.Color}'>${data.Level} ${data.LevelName}</span></h1>`
                    var standardName = `<h2>Standard: <span style='color:${data.Color}'>${data.Module}</span></h2>`

                    idDiv.value = data.ID
                    colorDiv.value = data.Color
                    moduleDiv.value = data.Module
                    levelNameDiv.value = data.LevelName
                    levelDiv.innerHTML = levelName
                    standardDiv.innerHTML = standardName
                    heading1Div.value = data.Heading1
                    heading2Div.value = data.Heading2
                    heading3Div.value = data.Heading3
                    heading4Div.value = data.Heading4
                    paragraphDiv.textContent = data.Paragraph
                    pageNumberDiv.value = data.PageNum
                    
                })
        }

        var form = document.getElementById('form')
        form.addEventListener('submit', function(e){
            e.preventDefault()
            console.log('SUBMITTED',level, standard, pk)
            var url = 'http://127.0.0.1:8000/api/content-update/' + level + '/' + standard + '/' + pk + '/'
            
            var idDiv = document.getElementById('id').value
            var colorDiv = document.getElementById('color').value
            var moduleDiv = document.getElementById('module').value
            var levelNameDiv = document.getElementById('levelName').value
            
            //var levelDiv = document.getElementById('level').value
            var standardDiv = document.getElementById('standard').value
            var heading1Div = document.getElementById('heading1').value
            var heading2Div = document.getElementById('heading2').value
            var heading3Div = document.getElementById('heading3').value
            var heading4Div = document.getElementById('heading4').value
            var paragraphDiv = document.getElementById('paragraph').value
            var pageNumberDiv = document.getElementById('pageNum').value

            fetch(url,{
                method : 'POST',
                headers:{
                    'content-type':'application/json',
                    'X-CSRFToken':csrftoken,
                },
                body:JSON.stringify({
                'ID':idDiv,
                'Color':colorDiv,
                'LevelName':levelNameDiv,
                'Module':moduleDiv,
                'Level':level,
                'Title':standardDiv,
                'Heading1':heading1Div,
                'Heading2':heading2Div,
                'Heading3':heading3Div,
                'Heading4':heading4Div,
                'Paragraph':paragraphDiv,
                'PageNum':pageNumberDiv,
                })
            }).then(function(response){
                console.log('DONE!!!!!!!!!!')
            })
        })

        
    </script>
{% endblock page_content %}