/* 
Template Name: Writer Tracker 
*/

get_header(); 
?>

<style>
/* Scoped CSS for Writer Tracker */
.writer-tracker-container {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
    margin: 50px auto;
    max-width: 900px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.writer-tracker-container h2 {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.writer-tracker-container p {
    color: #555;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 40px;
}

.writer-tracker-form {
    margin-bottom: 20px;
}

.writer-tracker-form input[type="text"],
.writer-tracker-form input[type="date"],
.writer-tracker-form select {
    width: calc(25% - 20px);
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.writer-tracker-form button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.writer-tracker-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.writer-tracker-table th,
.writer-tracker-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.writer-tracker-table th {
    background-color: #f9f9f9;
    color: #333;
}

.writer-tracker-table td {
    background-color: #fff;
    color: #555;
}

.writer-tracker-table tr:hover {
    background-color: #f1f1f1;
}

.writer-tracker-status-assigned {
    color: #FF9800;
}

.writer-tracker-status-in-progress {
    color: #2196F3;
}

.writer-tracker-status-completed {
    color: #4CAF50;
}

.writer-tracker-actions {
    text-align: right;
    margin-bottom: 20px;
}

.writer-tracker-actions button {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

</style>

<div class="writer-tracker-container">
    <h2>Writer Tracker template</h2>
    <p>Track your writers, their assigned articles, deadlines, and progress with this writer tracker tool. Add new assignments and manage them effectively.</p>

    <div class="writer-tracker-form">
        <form id="writerTrackerForm">
            <input type="text" id="writerName" placeholder="Writer's Name" required>
            <input type="text" id="articleTitle" placeholder="Article Title" required>
            <input type="date" id="deadline" required>
            <select id="status" required>
                <option value="assigned">Assigned</option>
                <option value="in-progress">In Progress</option>
                <option value="completed">Completed</option>
            </select>
            <button type="submit">Add Assignment</button>
        </form>
    </div>

    <div class="writer-tracker-actions">
        <button id="downloadCSV">Download CSV</button>
        <button id="printPage">Print</button>
    </div>

    <table class="writer-tracker-table" id="writerTrackerTable">
        <thead>
            <tr>
                <th>Writer</th>
                <th>Article Title</th>
                <th>Deadline</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <!-- Dynamic content rows will be inserted here -->
        </tbody>
    </table>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const writerTrackerForm = document.getElementById('writerTrackerForm');
    const writerTrackerTable = document.getElementById('writerTrackerTable').querySelector('tbody');

    writerTrackerForm.addEventListener('submit', function(event) {
        event.preventDefault();

        // Get form values
        const writerName = document.getElementById('writerName').value;
        const articleTitle = document.getElementById('articleTitle').value;
        const deadline = document.getElementById('deadline').value;
        const status = document.getElementById('status').value;

        // Create a new row in the table
        const newRow = document.createElement('tr');

        const writerCell = document.createElement('td');
        writerCell.textContent = writerName;

        const titleCell = document.createElement('td');
        titleCell.textContent = articleTitle;

        const deadlineCell = document.createElement('td');
        deadlineCell.textContent = deadline;

        const statusCell = document.createElement('td');
        statusCell.textContent = status.replace(/-/g, ' ');
        statusCell.className = 'writer-tracker-status-' + status;

        newRow.appendChild(writerCell);
        newRow.appendChild(titleCell);
        newRow.appendChild(deadlineCell);
        newRow.appendChild(statusCell);

        writerTrackerTable.appendChild(newRow);

        // Clear the form
        writerTrackerForm.reset();
    });

    // Download CSV functionality
    document.getElementById('downloadCSV').addEventListener('click', function() {
        let csvContent = "data:text/csv;charset=utf-8,";
        const rows = document.querySelectorAll('table tr');
        
        rows.forEach(row => {
            const cols = row.querySelectorAll('td, th');
            const rowData = Array.from(cols).map(col => col.innerText).join(",");
            csvContent += rowData + "\r\n";
        });

        const encodedUri = encodeURI(csvContent);
        const link = document.createElement('a');
        link.setAttribute('href', encodedUri);
        link.setAttribute('download', 'writer_tracker.csv');
        document.body.appendChild(link);

        link.click();
        document.body.removeChild(link);
    });

    // Print page functionality
    document.getElementById('printPage').addEventListener('click', function() {
        window.print();
    });
});
</script>


</main><!--/.neve-main-->


</div><!--/.wrapper-->
		<script type="text/javascript">
		
(function( w ){
	"use strict";
	// rel=preload support test
	if( !w.loadCSS ){
		w.loadCSS = function(){};
	}
	// define on the loadCSS obj
	var rp = loadCSS.relpreload = {};
	// rel=preload feature support test
	// runs once and returns a function for compat purposes
	rp.support = (function(){
		var ret;
		try {
			ret = w.document.createElement( "link" ).relList.supports( "preload" );
		} catch (e) {
			ret = false;
		}
		return function(){
			return ret;
		};
	})();

	// if preload isn't supported, get an asynchronous load by using a non-matching media attribute
	// then change that media back to its intended value on load
	rp.bindMediaToggle = function( link ){
		// remember existing media attr for ultimate state, or default to 'all'
		var finalMedia = link.media || "all";

		function enableStylesheet(){
			// unbind listeners
			if( link.addEventListener ){
				link.removeEventListener( "load", enableStylesheet );
			} else if( link.attachEvent ){
				link.detachEvent( "onload", enableStylesheet );
			}
			link.setAttribute( "onload", null ); 
			link.media = finalMedia;
		}

		// bind load handlers to enable media
		if( link.addEventListener ){
			link.addEventListener( "load", enableStylesheet );
		} else if( link.attachEvent ){
			link.attachEvent( "onload", enableStylesheet );
		}

		// Set rel and non-applicable media type to start an async request
		// note: timeout allows this to happen async to let rendering continue in IE
		setTimeout(function(){
			link.rel = "stylesheet";
			link.media = "only x";
		});
		// also enable media after 3 seconds,
		// which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
		setTimeout( enableStylesheet, 3000 );
	};

	// loop through link elements in DOM
	rp.poly = function(){
		// double check this to prevent external calls from running
		if( rp.support() ){
			return;
		}
		var links = w.document.getElementsByTagName( "link" );
		for( var i = 0; i < links.length; i++ ){
			var link = links[ i ];
			// qualify links to those with rel=preload and as=style attrs
			if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
				// prevent rerunning on link
				link.setAttribute( "data-loadcss", true );
				// bind listeners to toggle media back
				rp.bindMediaToggle( link );
			}
		}
	};

	// if unsupported, run the polyfill
	if( !rp.support() ){
		// run once at least
		rp.poly();

		// rerun poly on an interval until onload
		var run = w.setInterval( rp.poly, 500 );
		if( w.addEventListener ){
			w.addEventListener( "load", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		} else if( w.attachEvent ){
			w.attachEvent( "onload", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		}
	}


	// commonjs
	if( typeof exports !== "undefined" ){
		exports.loadCSS = loadCSS;
	}
	else {
		w.loadCSS = loadCSS;
	}
}( typeof global !== "undefined" ? global : this ) );
		</script>
		
</body>

</html>