{% extends 'base.html' %}

{% block title %}Create Post{% endblock %}

{% block content %}
<style>
    .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    .container {
        display: flex;
        justify-content: center;
    }

    form {
        width: 120%;
        padding: 20px;
        border-radius: 5px;
        background-color: #343a40;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }

    input[type="text"],
    textarea {
        width: calc(100% - 24px);
        padding: 10px;
        border-radius: 5px;
        cursor: text;
    }

    input[type="file"] {
        width: calc(100% - 24px);
        padding: 10px;
        border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

    .btn-primary {
        background-color: #007bff;
        border: none;
        color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0051a8 0 -3px 0 inset;
    }

    button:focus {
        box-shadow: #0051a8 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0051a8 0 -3px 0 inset;
    }
    
    .btn-primary:hover {
        box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0051a8 0 -3px 0 inset;
    }

    .note {
        font-style: italic;
        color: #ccc;
    }

    .custom-file-upload {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 10px;
        cursor: pointer;
        width: calc(100% - 44px);
        border-radius: 5px;
        background-color: #fff;
        color: #333;
        text-align: center;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Create a New Post</h1>
            <form method="POST" action="{{ url_for('create_post', category_id=category.id) }}" enctype="multipart/form-data">
                {{ form.csrf_token }}
                <div class="form-group">
                    <input type="text" class="form-control" id="post_name" name="post_name" placeholder="Title" required>
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="text" name="text" rows="6" placeholder="Content" required></textarea>
                </div>
                <label for="media" class="custom-file-upload" id="drop-area">
                    Click or drag & drop to upload media
                </label>
                <input type="file" id="media" name="media" style="display: none;" multiple><br>
                <ul id="file-list" class="file-list"></ul>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
                  
            <p class="note"><strong>Note:</strong> **bold** for bold text, *italic* for italic text</p>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const textarea = document.getElementById('text');
        const fileList = document.getElementById('file-list');
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('media');

        textarea.addEventListener('input', function() {
            const text = textarea.value;
            const boldRegex = /\*\*(.*?)\*\*/g;
            const italicRegex = /\*(.*?)\*/g;
            const newText = text.replace(boldRegex, '<strong>$1</strong>').replace(italicRegex, '<em>$1</em>');
            textarea.innerHTML = newText;
        });

        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight() {
            dropArea.style.backgroundColor = '#f0f0f0';
        }

        function unhighlight() {
            dropArea.style.backgroundColor = '#fff';
        }

        dropArea.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;

            handleFiles(files);
        }

        function handleFiles(files) {
            fileList.innerHTML = '';
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const listItem = document.createElement('li');
                listItem.textContent = file.name;
                listItem.classList.add('file-list-item');
                fileList.appendChild(listItem);
            }
        }

        fileInput.addEventListener('change', function() {
            handleFiles(this.files);
        });
    });
</script>

{% endblock %}