@model Slide
@{
    ViewData["Title"] = "New Meow";
}

<form asp-action="Create" method="post" class="slide-form">
    @Html.AntiForgeryToken()

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h5 class="mb-0">Slide Content</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label asp-for="Name" class="form-label">Name *</label>
                        <input asp-for="Name" class="form-control" placeholder="e.g. Welcome Screen" required />
                        <span asp-validation-for="Name" class="text-danger"></span>
                    </div>
                    <div class="mb-3">
                        <label asp-for="SlideType" class="form-label">Type</label>
                        <select asp-for="SlideType" asp-items="Html.GetEnumSelectList<SlideType>()" class="form-select" id="slideType"></select>
                    </div>
                    <div id="contentSection">
                        <label class="form-label">Content</label>
                        <textarea asp-for="Content" id="contentEditor" class="form-control" rows="15"></textarea>
                    </div>
                    <div id="embedSection" style="display:none;">
                        <div class="mb-3">
                            <label asp-for="EmbedUrl" class="form-label">Embed URL</label>
                            <input asp-for="EmbedUrl" class="form-control" placeholder="https://example.com/page" />
                            <div class="form-text">The URL will be displayed in an iframe on the slide.</div>
                        </div>
                    </div>
                    <div id="icsSection" style="display:none;">
                        <div class="mb-3">
                            <label asp-for="IcsSource" class="form-label">ICS Calendar Source</label>
                            <input asp-for="IcsSource" class="form-control" placeholder="https://calendar.example.com/feed.ics" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Or Upload ICS File</label>
                            <input type="file" id="icsFileUpload" class="form-control" accept=".ics" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header"><h5 class="mb-0">Appearance</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label asp-for="BackgroundColor" class="form-label">Background Colour</label>
                        <div class="input-group">
                            <input type="color" id="bgColorPicker" class="form-control form-control-color" value="#ffffff" />
                            <input asp-for="BackgroundColor" class="form-control" placeholder="#ffffff" />
                        </div>
                    </div>
                    <div class="mb-3">
                        <label asp-for="BackgroundImage" class="form-label">Background Image URL</label>
                        <input asp-for="BackgroundImage" class="form-control" placeholder="/uploads/background.jpg" />
                        <button type="button" class="btn btn-sm btn-outline-secondary mt-1" onclick="uploadBackgroundImage()"><i class="bi bi-upload me-1"></i>Upload</button>
                        <input type="file" id="bgImageUpload" class="d-none" accept="image/*" />
                    </div>
                    <div class="mb-3">
                        <label asp-for="BackgroundSize" class="form-label">Image Sizing</label>
                        <select asp-for="BackgroundSize" class="form-select">
                            <option value="cover">Cover — fill, crop if needed</option>
                            <option value="contain">Contain — fit whole image</option>
                            <option value="fill">Fill — stretch to fit</option>
                            <option value="scale-down">Scale Down — shrink only</option>
                            <option value="auto">Auto — original size</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label asp-for="CustomCss" class="form-label">Custom CSS</label>
                        <textarea asp-for="CustomCss" class="form-control font-monospace" rows="4" placeholder="color: white;&#10;font-family: Arial;"></textarea>
                    </div>
                </div>
            </div>
            <div class="card mb-4">
                <div class="card-header"><h5 class="mb-0">Scheduling</h5></div>
                <div class="card-body">
                    <label asp-for="ExpiresAt" class="form-label">Expires</label>
                    <input asp-for="ExpiresAt" type="datetime-local" class="form-control" />
                    <div class="form-text">After this time the Meow is automatically skipped on displays — it stays in the library, just not shown. Leave blank for no expiry. Compared against the server's configured time zone (see the <code>TimeZone</code> setting).</div>
                </div>
            </div>
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-check-lg me-1"></i>Create Meow</button>
                <a href="/admin/slides" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div>
    </div>
</form>

@section Styles {
    <style>.tox-tinymce { border-radius: 0.375rem !important; }</style>
}

@section Scripts {
    <script src="/lib/tinymce/tinymce.min.js"></script>
    <script>
        document.getElementById('slideType').addEventListener('change', function () {
            document.getElementById('contentSection').style.display = this.value === '0' ? '' : 'none';
            document.getElementById('embedSection').style.display = this.value === '1' ? '' : 'none';
            document.getElementById('icsSection').style.display = this.value === '2' ? '' : 'none';
            if (this.value === '0') initTinyMCE();
        });

        function initTinyMCE() {
            if (tinymce.get('contentEditor')) return;
            tinymce.init({
                selector: '#contentEditor',
                height: 500,
                license_key: 'gpl',
                paste_data_images: true,
                paste_webkit_styles: 'all',
                paste_postprocess: function(editor, args) {
                    args.node.querySelectorAll('colgroup').forEach(function(cg) { cg.remove(); });
                    args.node.querySelectorAll('*').forEach(function(el) {
                        var tag = el.tagName.toLowerCase();
                        var isTablePart = (tag === 'td' || tag === 'th' || tag === 'table' || tag === 'tr');
                        if (el.style.color && !isTablePart) el.style.color = '#000';
                        if (el.style.backgroundColor && !isTablePart) el.style.backgroundColor = '';
                        if (tag === 'col' || tag === 'td' || tag === 'th' || tag === 'table') { el.removeAttribute('width'); el.style.width = ''; }
                        if (tag === 'td' || tag === 'th') { el.style.border = '1px solid #000'; el.style.padding = '6px 10px'; }
                        if (tag === 'table') { el.style.borderCollapse = 'collapse'; el.removeAttribute('border'); el.removeAttribute('cellspacing'); el.removeAttribute('cellpadding'); }
                    });
                },
                valid_styles: {
                    '*': 'color,background-color,background,font-size,font-family,text-align,text-decoration,font-weight,font-style,border,border-color,border-width,border-style,border-collapse,padding,padding-left,padding-right,padding-top,padding-bottom,margin,margin-left,margin-right,margin-top,margin-bottom,width,height,max-width,max-height,min-width,min-height,vertical-align,white-space,display,float,line-height,letter-spacing,text-indent,text-transform,list-style-type,opacity'
                },
                extended_valid_elements: 'table[*],tr[*],td[*],th[*],colgroup[*],col[*],thead[*],tbody[*],tfoot[*],div[*],span[*],p[*],img[*],a[*],h1[*],h2[*],h3[*],h4[*],h5[*],h6[*]',
                menubar: 'file edit view insert format table',
                plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
                toolbar: 'undo redo | blocks fontsize | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media table | removeformat code fullscreen',
                font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 20pt 24pt 28pt 32pt 36pt 48pt 64pt 72pt 96pt',
                images_upload_handler: function (blobInfo) {
                    return new Promise(function (resolve, reject) {
                        var fd = new FormData(); fd.append('file', blobInfo.blob(), blobInfo.filename());
                        fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => resolve(d.location)).catch(e => reject(e));
                    });
                },
                file_picker_types: 'image',
                file_picker_callback: function (cb, value, meta) {
                    fetch('/api/listuploads').then(r => r.json()).then(function (files) {
                        var input = document.createElement('input');
                        input.type = 'file'; input.accept = 'image/*';
                        if (files && files.length > 0) {
                            var dialog = document.createElement('div');
                            dialog.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:99999;display:flex;align-items:center;justify-content:center;';
                            var panel = document.createElement('div');
                            panel.style.cssText = 'background:#fff;border-radius:12px;padding:1.5em;max-width:700px;max-height:80vh;overflow-y:auto;width:90%;';
                            panel.innerHTML = '<h4 style="margin:0 0 1em;color:#333;">Select Image or Upload New</h4>';
                            var grid = document.createElement('div');
                            grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:1em;';
                            files.forEach(function (f) {
                                var thumb = document.createElement('div');
                                thumb.style.cssText = 'cursor:pointer;border:2px solid #ddd;border-radius:8px;overflow:hidden;aspect-ratio:1;background:#f0f0f0;';
                                thumb.innerHTML = '<img src="' + f.value + '" style="width:100%;height:100%;object-fit:cover;" />';
                                thumb.title = f.title;
                                thumb.addEventListener('click', function () { cb(f.value, { title: f.title }); document.body.removeChild(dialog); });
                                thumb.addEventListener('mouseenter', function () { this.style.borderColor = '#3b6fd4'; });
                                thumb.addEventListener('mouseleave', function () { this.style.borderColor = '#ddd'; });
                                grid.appendChild(thumb);
                            });
                            panel.appendChild(grid);
                            var uploadBtn = document.createElement('button');
                            uploadBtn.textContent = 'Upload New Image';
                            uploadBtn.style.cssText = 'background:#3b6fd4;color:#fff;border:none;padding:0.6em 1.5em;border-radius:6px;cursor:pointer;margin-right:0.5em;';
                            uploadBtn.addEventListener('click', function () { document.body.removeChild(dialog); input.click(); });
                            var cancelBtn = document.createElement('button');
                            cancelBtn.textContent = 'Cancel';
                            cancelBtn.style.cssText = 'background:#eee;color:#333;border:none;padding:0.6em 1.5em;border-radius:6px;cursor:pointer;';
                            cancelBtn.addEventListener('click', function () { document.body.removeChild(dialog); });
                            panel.appendChild(uploadBtn); panel.appendChild(cancelBtn);
                            dialog.appendChild(panel);
                            dialog.addEventListener('click', function (e) { if (e.target === dialog) document.body.removeChild(dialog); });
                            document.body.appendChild(dialog);
                        } else { input.click(); }
                        input.addEventListener('change', function () {
                            if (!this.files[0]) return;
                            var fd = new FormData(); fd.append('file', this.files[0]);
                            fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => cb(d.location, { title: this.files[0].name }));
                        });
                    }).catch(function () { input.click(); });
                },
                content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: #000; background: #fff; }',
                skin: 'oxide',
                content_css: 'default',
                promotion: false,
                branding: false
            });
        }
        if (document.getElementById('slideType').value === '0') initTinyMCE();
        document.getElementById('bgColorPicker').addEventListener('input', function () { document.getElementById('BackgroundColor').value = this.value; });
        function uploadBackgroundImage() { document.getElementById('bgImageUpload').click(); }
        document.getElementById('bgImageUpload').addEventListener('change', function () {
            if (!this.files[0]) return; var fd = new FormData(); fd.append('file', this.files[0]);
            fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => { document.getElementById('BackgroundImage').value = d.location; });
        });
        document.getElementById('icsFileUpload')?.addEventListener('change', function () {
            if (!this.files[0]) return; var fd = new FormData(); fd.append('file', this.files[0]);
            fetch('/api/uploadfile', { method: 'POST', body: fd }).then(r => r.json()).then(d => { document.getElementById('IcsSource').value = d.url; });
        });
    </script>
}