var express = require('express')
var router = express.Router()
var session = require('express-session')
const MongoStore = require('connect-mongo')
require('dotenv').config()



router.use(session({
  secret: process.env.SECRET_KEY,
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({ mongoUrl: process.env.DATABASE_URI })
}))

const loginRoute = require('./users/login')
router.use('/', loginRoute) 

const postRoute = require('./users/post')
router.use('/post', postRoute) 

const categoryRoute = require('./users/category')
router.use('/category', categoryRoute) 



module.exports = router

var express = require('express')
var router = express.Router()
var settings = require('../../settings')



router.get('/', async function(req, res, next) {
    settings.dLogo = 'ទំព័រ​ការផ្សាយ'
  
    if(req.session.user){
        const today = new Date()
        const date = today.toLocaleDateString('fr-CA')
        const time = today.toLocaleTimeString('it-IT')
        settings.datetime = date + 'T' +  time

        settings.categories = await require('../../controllers/categories/read')('all')
        
        res.render('users/post', settings)
    }else{
        res.redirect('/users')
    }
})



module.exports = router

<%- include('partials/header.ejs') %>
<link href="/styles/users/post.css" rel="stylesheet"></link>
<script src="/scripts/ckeditor/ckeditor.js"></script>
<script src="/scripts/users/post.js"></script>
  
<section class='Main region'>
    <div class='sidebar'>
        <%- include('partials/menu.ejs') %>
    </div>

    <div class='content'>
        <form action='/users/post' method='post'>
            <input type='text' name='title' placeholder='ចំណងជើង' required />
            <textarea name="content" id="editor" ></textarea>
            <div class='wrapper'>
                <select name='category' >
                    <% for(let v in categories){ %>
                    <option><%= categories[v].label %></option>
                    <% } %>
                </select>
                <input type='text' name='thumb' requred placeholder="Thumb" />
                <input type='datetime-local' value='<%= datetime %>' name='datetime' required />
                <input type='submit' value='ចុះ​ផ្សាយ' />
            </div>
        </form>

        <div class='form'>
            <select name='type'>
                <option>YouTube</option>
                <option>YouTubePlaylist</option>
                <option>Facebook</option>
                <option>OK</option>
                <option>Dailymotion</option>
                <option>Vimeo</option>
            </select>
            <input name='id' type='text' placeholder="អត្តសញ្ញាណវីដេអូ" required />
            <select name='ending'>
                <option>​ចប់​ឬ​នៅ?</option>
                <option>ចប់​ហើយ</option>
                <option>មិន​ទាន់ចប់</option>
            </select>
            <input name='entries' value='' type='hidden' />
            <input onclick='genJson()' type="button" value="បញ្ចូល​វីដេអូ" />
        </div>

        <table class='viddata'></table>
    
        <script src="/scripts/ckeditor/config.js"></script>
    </div>
</section>
    
<%- include('partials/footer.ejs') %>

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="entries"').val()
        entries = {
            type: type,
            id: id,
            ending: ending,
        }
        if(json === ''){
            json = JSON.stringify([entries])
            $('input[name="entries"').val(json)
        }else{
            json = JSON.parse(json)
            json.push(entries)
            json = JSON.stringify(json)
            $('input[name="entries"').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()
    episode -= 1
    for(let v=0; v<episode; v++){
        $('.episode').eq(v).html(v+1)
    }
}

.Main .content .ck-editor__editable{
    min-height: 320px;
    color: black;
}

.Main .content form .wrapper, 
.Main .content .form{
    margin-top:5px;
    display: grid;
    grid-template-columns: 20% auto 30% 15%;
}

.Main .content form input, 
.Main .content form select,
.Main .content .form input,
.Main .content .form select
{
    font: var(--body-font);
    width: 100%;
    padding: 5px 10px;
}

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

.Main .content 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;
}