<!--views/admin/index.php-->
<?php include('views/admin/partials/header.php'); ?>

<script src="<?php echo $BASE ?>/public/scripts/admin/post.js"></script>
<script src="<?php echo $BASE ?>/public/scripts/ckeditor/ckeditor.js"></script>
<link href='<?php echo $BASE ?>/public/styles/admin/partials/main.css' rel='stylesheet' />
<link href='<?php echo $BASE ?>/public/styles/admin/post.css' rel='stylesheet' />

<div class='Main region'>
    <div class='sidebar'>
        <?php include('views/admin/partials/menu.php') ?>
    </div>

    <div class='content'>
        <form action='<?php echo $BASE ?>/admin/post' method='post'>
            <input type='text' name='title' required placeholder='ចំណងជើង' />
            <textarea name='editor' id='editor'></textarea>
            <div class='wrapper'>
                <select name='category'>
                    <option>ជាតិ</option>
                    <option>អន្តរជាតិ</option>
                    <option>ជំនួញ</option>
                </select>

                <input type='text' name='thumb' placeholder='តំណរភ្ជាប់​រូប' required />
                <input type='datetime-local' name='datetime' required />
                <input type='hidden' name='video' value='' />
                <input type='submit' value='បញ្ជូន' />
            </div>
        </form>

        <div class='video'>
            <select name='type'>
                <option>YouTube</option>
                <option>YTPlaylist</option>
                <option>Facebook</option>
            </select>
            <input type='text' name='id' required placeholder='ID' />

            <select name='ending'>
               <option>Yes</option>
               <option>No</option> 
            </select>

            <input type='submit' value='វីដេអូ' onClick='genJson()' />
        </div>

        <table class='viddata'></table>
    </div>
</div>

<script src="<?php echo $BASE ?>/public/scripts/ckeditor/config.js"></script>
<?php include('views/admin/partials/footer.php');

/* public/styles/admin/post.css */
.Main .content .ck-editor__editable{
    min-height: 260px;
}

.Main .content form input[name=title]{
    width: 100%;
    font: 17px/1.5 Oswald, Koulen;
    padding: 2px 10px;
}

.Main input, .Main select{
    font: var(--body-font);
    padding: 2px 10px;
}

.Main .content form .wrapper, .Main .content .video{
    display: grid;
    grid-template-columns: 20% auto 25% 10%;
}

table {
    margin-top: 5px;
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    background: white;
    color: black;
    text-align: center;
    padding: 5px;
}

.Main .content table, th {
    background: #ddd;
}

.Main .content table .episode:hover{
    cursor: pointer;
    color: red;
}

var episode = 0

const genJson = () => {
    const type = $('select[name="type"').val()
    const id = $('input[name="id"').val()
    const ending = $('select[name="ending"').val()
            
    var entries = {
        type: type,
        id: id,
        ending: ending,
    }
        
    var success = false
    for(let v in entries){
        if(entries[v] === ''){
            alert('You need to fill the required field '+v)
            success = false
            break
        }else{
            success = true
        }
    }

    if(success){
        let json = $('input[name="video"]').val()
        entries = {
            type: type,
            id: id,
            ending: ending,
        }
        if(json === ''){
            json = JSON.stringify([entries])
            $('input[name="video"]').val(json)
        }else{
            json = JSON.parse(json)
            json.push(entries)
            json = JSON.stringify(json)
            $('input[name="video"').val(json)
        }

        let html = `<td title="Delete" onClick="deleteRow(event)" class="episode">${++episode}</td>`
        for(let v in entries){
            html += `<td class="td${episode}">${entries[v]}</td>`
        }

        if($('.viddata').html() === ''){
            $('.viddata').append('<tr>')
            $('.viddata').append('<th>ភាគ/លុប</th>')
            $('.viddata').append('<th>ប្រភេទ​</th>')
            $('.viddata').append('<th>អត្តសញ្ញាណ​</th>')
            $('.viddata').append('<th>ចប់ឬ​នៅ?</th>')
            $('.viddata').append('</tr>')
        }

        $('.viddata').append(`<tr>${html}</tr>`)

    }
}

function deleteRow(e) {
    e.target.parentElement.remove()
    
    let index = parseInt(e.target.innerHTML)
    index = index - 1
    let json = $('input[name="video"]').val()
    json = JSON.parse(json)
    json.splice(index, 1);
    json = JSON.stringify(json)
    if(json.length === 0){
        json = ''
    }
    $('input[name="video"').val(json)

    episode -= 1
    for(let v=0; v<episode; v++){
        $('.episode').eq(v).html(v+1)
    }
}

GitHub: https://github.com/Sokhavuth/multimedia_

Heroku: https://khmerweb-multimedia1.herokuapp.com/