<%@ Page Title="Full-Page Drop" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Full-Page Drop - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Full-Page Drop</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Full-Page Drop Target</div>
    <div class="demo-card-body">
        <p class="demo-description">
            The entire page acts as a drop target. Drag a file anywhere on this page
            to trigger the upload. A visible overlay confirms the drop zone is active.
        </p>

        <style>
            #fullPageOverlay {
                display: none; position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(59, 130, 246, 0.12);
                border: 4px dashed #3b82f6;
                z-index: 9999;
                pointer-events: none;
                align-items: center; justify-content: center;
            }
            #fullPageOverlay.active { display: flex; }
            #fullPageOverlay span {
                font-size: 1.5rem; font-weight: 700; color: #1d4ed8;
                background: #fff; padding: 1rem 2rem; border-radius: 0.75rem;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }
        </style>

        <div id="fullPageOverlay"><span>Drop files to upload</span></div>
        <div id="fpUploader"></div>
        <div id="fpStatus" style="margin-top:0.75rem; font-size:0.85rem; color:#6b7280;"></div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(el, {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
  multiple: true,
  autoUpload: true,
  dropTarget: document.documentElement
});

// Overlay shows on dragenter, hides on dragleave/drop
document.addEventListener('dragenter', showOverlay);
document.addEventListener('drop', hideOverlay);</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var overlay = document.getElementById('fullPageOverlay');
        var status = document.getElementById('fpStatus');
        var counter = 0;

        document.addEventListener('dragenter', function (e) {
            e.preventDefault();
            counter++;
            overlay.classList.add('active');
        });
        document.addEventListener('dragleave', function (e) {
            counter--;
            if (counter <= 0) { counter = 0; overlay.classList.remove('active'); }
        });
        document.addEventListener('dragover', function (e) { e.preventDefault(); });
        document.addEventListener('drop', function (e) {
            e.preventDefault();
            counter = 0;
            overlay.classList.remove('active');
        });

        AjaxUploader.create(document.getElementById('fpUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            dropTarget: document.documentElement,
            onTaskComplete: function (task) {
                status.textContent = 'Uploaded: ' + task.fileName;
            }
        });
    })();
</script>
</asp:Content>
