// routes/admin/post.js

import { Router } from "../../deps.ts"
const router = Router()

import post from '../../controllers/admin/post.js'

router.get('/', async (req, res) => {
  if(await req.session.get("user") === "logged-in"){
    post.getItem(req, res)
  }else{
    res.redirect('/login')
  }
})

router.post('/', async (req, res) => {
  if(await req.session.get("user" === "logged-in")){
    post.postItem(req, res)
  }else{
    res.redirect('/login')
  }
})
  
export default router

// views/admin/post.jsx

/** @jsx h */
import { h, renderSSR } from "../../deps.ts"
import Base from '../base.jsx'
  
function PostJsx(props){

  return(
        <section class="Post">
            <link rel="stylesheet" href="/styles/admin/post.css" />
            <script src="/scripts/ckeditor/ckeditor.js"></script>
            <script src="/scripts/addCategory.js"></script>
            <script src="/scripts/video.js"></script>

            <div class="header">
                <div class="inner region">
                    <div class="logo">{props.config.pageTitle}</div>
                    <form action="/admin/search" method="post">
                        <select name="searchType">
                            <option>ការផ្សាយ</option>
                        </select>
                        <input type="text" name="q" required placeholder="Search" />
                        <input type="submit" value="ស្វែង​រក" />
                    </form>
                    <div class="logout">
                        <a href="/">ទំព័រ​មុខ</a> | <a href="/login/logout">ចេញ​ក្រៅ</a>
                    </div>
                </div>
            </div>

            <div class="main region">
              <div class="sidebar">
                <div class="inner">
                  <a href="/admin/post"><img src="/images/movie.png" /></a>
                  <a class="title" href="/admin/post">ការផ្សាយ</a>

                  <a href="/admin/book"><img src="/images/books.png" /></a>
                  <a class="title" href="/admin/book">សៀវភៅ</a>

                  <a href="/admin/category"><img src="/images/category.png" /></a>
                  <a class="title" href="/admin/category">ជំពូក</a>

                  <a href="/admin/upload"><img src="/images/upload.png" /></a>
                  <a class="title" href="/admin/upload">Upload</a>

                  <a href="/admin/user"><img src="/images/users.png" /></a>
                  <a class="title" href="/admin/user">អ្នក​ប្រើប្រាស់</a>

                  <a href="/admin/setting"><img src="/images/setting.png" /></a>
                  <a class="title" href="/admin/setting">Setting</a>
                </div>
              </div>
              <div class="content" dangerouslySetInnerHTML={{__html: `
                <form action="/admin/post" name="pform" onSubmit="submitform(event)" method="post">
                  <input type="text" name="title" required placeholder="ចំណងជើង" />
                  <textarea name="content" id="editor"></textarea>
                  <input type="text" name='categories' required placeholder="ជំពូកផ្សេង​ៗ" />
                  <div class="wrapper"> 
                  <select id="category" onchange="getCategory()">
                    <option>ជ្រើសរើស​ជំពូក</option>
                    <option>News</option>
                    <option>Movie</option>
                    <option>Entertainment</option>
                    <option>Sport</option>
                  </select>
                  <input type="text" name="thumb" required placeholder="តំណរ​ភ្ជាប់​រូប​តំណាង" />
                  <input type="datetime-local" name="datetime" required />
                  <input type="submit" value="បញ្ជូន" />
                  <input type="hidden" name="video" value="" />
                  </div>
                </form>
                `}}>
                <div class="wrapper" >
                  <select name="type">
                    <option>YouTube</option>
                    <option>YouTubePL</option>
                    <option>Facebook</option>
                    <option>OK</option>
                  </select>
                  <input type="text" name="videoid" required placeholder="អត្តសញ្ញាណ​វីដេអូ" />
                  <select name="status">
                    <option>ចប់</option>
                    <option>នៅ​មាន​ត</option>
                  </select>
                  <div dangerouslySetInnerHTML={{__html: `
                     <input onclick='genJson()' type="submit" value="បញ្ចូល​វីដេអូ" />
                  `}} />
                </div>
                <div class='viddata'>
                  <div></div>
                </div>
                
                <script src="/scripts/ckeditor/config.js"></script>
              </div>
              
            </div>

        </section>
  )
}

function Post(config){
  config.page = PostJsx
  const str = renderSSR(<Base config={config} />)
  return `<!DOCTYPE html>${str}`
}

export default Post

// views/base.jsx

/** @jsx h */
import { h, renderSSR } from "../deps.ts"

function Base(props){
  const Page = props.config.page
  
  return(
    <html>
      <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>{props.config.siteTitle} | {props.config.pageTitle}</title>
        <link href="/images/siteLogo.png" rel="icon" />
        <link href="/styles/base.css" rel="stylesheet" />
        <link href="/fonts/setup.css" rel="stylesheet" />
        <script src="/scripts/jquery.js"></script>
      </head>
      <body>
        <Page config={props.config} />
      </body>
    </html>
  )
}

export default Base

// static/scripts/video.js

var episode = 0

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

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

        let html =``

        for(let v in video){
            html += `<input class="td${episode}" value="${video[v]}" required />`
        }

        html += `<p title="Delete" onClick="deleteRow(event)" class="episode">${++episode}</p>`
        html = `<div>${html}</div>`
        
        if($('.viddata div').html() === ''){
            $('.viddata div').append('<b>ប្រភេទ​</b>')
            $('.viddata div').append('<b>អត្តសញ្ញាណ​</b>')
            $('.viddata div').append('<b>ចប់ឬ​នៅ?</b>')
            $('.viddata div').append('<b>ភាគ/លុប</b>')
        }
        
        $('.viddata div:eq(0)' ).after(html)
    }
}

function submitform(e){
    e.preventDefault()
    const is_video = $('input[name="video"').val()

    if((is_video !== '') && (is_video !== '[]')){
        let videos = []
        let part = {}
        let key = {0:'type', 1:'id', 2:'status'}

        for(let v=1; v<=episode; v++){
            for(let j=0; j<3; j++){
                part[key[j]] = $(`.viddata div:eq(${v}) input:eq(${j})`).val()
            }

            videos.push({...part})
        }
    
        const json = JSON.stringify(videos)
        $('input[name="video"').val(json)
    }
    
    document.forms["pform"].submit()
}

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)
    $('input[name="video"').val(json)

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

GitHub: https://github.com/Sokhavuth/khmerweb-deno

Deno Deploy: https://khmerweb-blog.deno.dev/admin/post