ZelWiki/TightWiki/Views/Page/Edit.cshtml

@using TightWiki.Models
@model TightWiki.Models.ViewModels.Page.PageEditViewModel
@{
    Layout = "/Views/Shared/_Layout.cshtml";
    var sessionState = ViewData["SessionState"] as TightWiki.SessionState ?? throw new Exception("Wiki State Context cannot be null.");
}

<link rel="stylesheet" href=@Url.Content("~/codemirror/codemirror.css")>
<link rel="stylesheet" href=@Url.Content("~/codemirror/theme/light.css")>
<link rel="stylesheet" href=@Url.Content("~/codemirror/theme/dark.css")>

<link rel="stylesheet" href=@Url.Content("~/codemirror/addon/scroll/simplescrollbars.css")>

<script src="@Url.Content("~/codemirror/codemirror.js")"></script>
<script src="@Url.Content("~/codemirror/addon/edit/matchbrackets.js")"></script>
<script src="@Url.Content("~/codemirror/mode/tightwiki/tightwiki.js")"></script>
<script src="@Url.Content("~/codemirror/addon/scroll/simplescrollbars.js")"></script>

<style type="text/css">
    .CodeMirror {
        border: 1px solid #eee;
        height: 50em;
    }

    .active {
        background-color: lightgreen !important;
    }

    #dropSection {
        width: 100%; /* Makes the section fully responsive */
        height: auto; /* Allow the height to adjust with content */
        min-height: 150px; /* Minimum height to allow space for content */
        border: 2px dashed #007bff;
        border-radius: 5px;
        text-align: center;
        font-size: 18px;
        color: #007bff;
        margin-bottom: 20px;
        padding: 20px;
        background-color: var(--bs-card-bg); /* Uses Bootstrap background color */
        word-wrap: break-word; /* Forces long words to break and wrap */
        white-space: normal; /* Ensures normal text wrapping */
    }

        #dropSection span {
            display: inline-block; /* Ensure the text behaves like inline elements */
            max-width: 100%; /* Restrict the width to 100% of the container */
            line-height: normal; /* Use normal line height for multi-line text */
        }

        #dropSection.dragover {
            background-color: #e9ecef;
            border-color: #007bff;
            color: #007bff;
        }

</style>

<script>
    function readyFn(jQuery) {
        $("#uploadedFiles").load("@GlobalConfiguration.BasePath/File/PageAttachments/@sessionState.PageNavigationEscaped");
    }

    $(document).ready(readyFn);

    document.addEventListener("DOMContentLoaded", function () {
        const dropSection = document.getElementById('dropSection');
        const fileInput = document.getElementById('fileInput');
        const uploadStatus = document.getElementById('uploadStatus');

        // Handle dragover event
        dropSection.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropSection.classList.add('dragover');
            dropSection.textContent = "Drop files here...";
        });

        // Handle dragleave event
        dropSection.addEventListener('dragleave', () => {
            dropSection.classList.remove('dragover');
            dropSection.textContent = "Attach files by dropping them here or by manually selecting them below:";
        });

        // Handle drop event
        dropSection.addEventListener('drop', (e) => {
            e.preventDefault();
            dropSection.classList.remove('dragover');
            dropSection.textContent = "Attach files by dropping them here or by manually selecting them below:";
            const files = e.dataTransfer.files;
            handleFileUpload(files);
        });

        // Open file input dialog on click
        dropSection.addEventListener('click', () => {
            fileInput.click();
        });

        // Handle file input change (manual upload)
        fileInput.addEventListener('change', () => {
            const files = fileInput.files;
            handleFileUpload(files);
        });

        // Function to handle file upload
        function handleFileUpload(files) {
            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('postedFiles', files[i]);
            }

            uploadFiles(formData);
        }

        // Function to upload files using fetch API
        function uploadFiles(formData) {
            fetch('@Url.Action("UploadDragDrop", "File")/@sessionState.PageNavigationEscaped', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())  // Read the response as JSON
                .then(result => {
                    if (result.success) {
                        uploadStatus.innerHTML = `<p>Upload successful: ${result.message}</p>`;
                    } else {
                        uploadStatus.innerHTML = `<p>Error: ${result.message}</p>`;
                    }
                    $("#uploadedFiles").load("@GlobalConfiguration.BasePath/File/PageAttachments/@sessionState.PageNavigationEscaped");
                })
                .catch(error => {
                    uploadStatus.innerHTML = `<p>Unexpected Error: ${error.message}</p>`;
                });
        }
    });
</script>

<div class="bodyDiv">
    <div class="card">
        <div class="card-header"><h3>Content</h3></div>
        <div class="card-body">
            @if (!string.IsNullOrEmpty(Model.ErrorMessage))
            {
                <div class="alert alert-danger">@Html.Raw(Model.ErrorMessage)</div>
            }
            @if (!string.IsNullOrEmpty(Model.SuccessMessage))
            {
                <div class="alert alert-success">@Html.Raw(Model.SuccessMessage)</div>
            }

            @using (Html.BeginForm(null, null, FormMethod.Post, new { action = $"{GlobalConfiguration.BasePath}{Context.Request.Path}" }))
            {
                @Html.HiddenFor(x => x.Id)

                <div class="form-group">
                    <button type="submit" class="btn btn-primary rounded-0">Save</button>
                    <a href="@GlobalConfiguration.BasePath/@sessionState.PageNavigation" target="_blank" rel="noopener" class="btn btn-success rounded-0" role="button">View</a>
                </div>
                <br />
                <strong>@Html.LabelFor(x => x.Name)</strong>

                <br />
                @Html.TextBoxFor(x => x.Name, new { style = "width:50%" })
                <div class="text-danger">@Html.ValidationMessageFor(m => m.Name)</div>
                <br />

                <strong>@Html.LabelFor(x => x.Description)</strong>

                <br />
                @Html.TextBoxFor(x => x.Description, new { style = "width:90%" })
                <div class="text-danger">@Html.ValidationMessageFor(m => m.Description)</div>
                <br />

                <strong>@Html.LabelFor(x => x.Body)</strong>

                <br />
                <div class="text-danger">@Html.ValidationMessageFor(m => m.Body)</div>
                <textarea id=Body name="Body">@Model.Body</textarea>
                <script>
                    var editor = CodeMirror.fromTextArea(document.getElementById("Body"), {
                        theme: "@sessionState.UserTheme.EditorTheme",
                        lineNumbers: true,
                        mode: "text/x-tightwiki",
                        matchBrackets: true,
                        viewportMargin: Infinity,
                        lineWrapping: true,
                        scrollbarStyle: "simple"
                    });
                </script>

                <br />

                <div class="form-group">
                    <button type="submit" class="btn btn-primary rounded-0">Save</button>
                    <a href="@GlobalConfiguration.BasePath/@sessionState.PageNavigation" target="_blank" rel="noopener" class="btn btn-success rounded-0" role="button">View</a>
                </div>
            }
        </div>
    </div>
    <br />

    <div class="card">
        <div class="card-header"><h3>Attachments</h3></div>
        <div class="card-body">
            @if (Model?.Id > 0 && @sessionState.CanCreate == true)
            {
                <div id="dropSection" class="dropSection">
                    <span class="d-inline-block">Drop file attachments here or click to upload manually.</span>
                </div>
                <input type="file" id="fileInput" style="display:none" multiple>
                <div id="uploadStatus"></div>
                <div id="uploadedFiles"></div>
            }
            else
            {
                <div>Save the page before uploading files.</div>
            }
        </div>
    </div>
</div>