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

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

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

<div class="demo-card">
    <div class="demo-card-header">Overlay on Drag Enter</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A semi-transparent overlay slides in when files are dragged over the
            target area, providing clear visual guidance for where to drop.
        </p>

        <style>
            .overlay-container {
                position: relative; min-height: 200px;
                border: 1px solid #e5e7eb; border-radius: 0.75rem;
                padding: 1.5rem; background: #fff;
            }
            .overlay-content p { color: #374151; }
            .drop-overlay {
                display: none; position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(59, 130, 246, 0.9);
                border-radius: 0.75rem; z-index: 10;
                align-items: center; justify-content: center;
                flex-direction: column; color: #fff;
            }
            .drop-overlay.active { display: flex; }
            .drop-overlay-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
            .drop-overlay-text { font-size: 1.1rem; font-weight: 600; }
        </style>

        <div id="overlayContainer" class="overlay-container">
            <div class="overlay-content">
                <p>This area contains regular page content. Try dragging a file over it
                   to see the upload overlay appear.</p>
                <div id="overlayUploader"></div>
            </div>
            <div id="dropOverlay" class="drop-overlay">
                <div class="drop-overlay-icon">&#11015;</div>
                <div class="drop-overlay-text">Release to upload</div>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>&lt;div id="container" class="overlay-container"&gt;
  &lt;div class="overlay-content"&gt;
    &lt;p&gt;Regular page content here&lt;/p&gt;
    &lt;div id="uploader"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="overlay" class="drop-overlay"&gt;
    Release to upload
  &lt;/div&gt;
&lt;/div&gt;

container.addEventListener('dragenter', function() {
  overlay.classList.add('active');
});
container.addEventListener('drop', function() {
  overlay.classList.remove('active');
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

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

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

        AjaxUploader.create(document.getElementById('overlayUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            dropTarget: container
        });
    })();
</script>
</asp:Content>
