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

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

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

<div class="demo-card">
    <div class="demo-card-header">Multiple Independent Drop Zones</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Two separate drop zones, each with their own uploader instance and file list.
            Useful for categorizing uploads (e.g., documents vs. images).
        </p>

        <style>
            .multi-zones { display: flex; gap: 1.5rem; flex-wrap: wrap; }
            .zone-card {
                flex: 1; min-width: 220px;
                border: 2px dashed #d1d5db; border-radius: 0.75rem;
                padding: 1.25rem; text-align: center;
                transition: border-color 0.3s, background 0.3s;
            }
            .zone-card.drag-over { border-color: #3b82f6; background: #eff6ff; }
            .zone-card h6 { margin: 0 0 0.75rem; font-weight: 600; }
            .zone-files { font-size: 0.8rem; color: #6b7280; margin-top: 0.5rem; text-align: left; }
        </style>

        <div class="multi-zones">
            <div class="zone-card" id="zoneA">
                <h6>&#128196; Documents</h6>
                <div id="uploaderA"></div>
                <div class="zone-files" id="filesA"></div>
            </div>
            <div class="zone-card" id="zoneB">
                <h6>&#128247; Images</h6>
                <div id="uploaderB"></div>
                <div class="zone-files" id="filesB"></div>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>// Zone A - Documents
AjaxUploader.create(elA, {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
  allowedExtensions: '.pdf,.docx,.txt,.xlsx',
  dropTarget: zoneA
});

// Zone B - Images
AjaxUploader.create(elB, {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
  allowedExtensions: '.jpg,.png,.gif,.webp',
  dropTarget: zoneB
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        function setupZone(uploaderId, zoneId, filesId, exts) {
            var zone = document.getElementById(zoneId);
            var files = document.getElementById(filesId);
            var counter = 0;
            zone.addEventListener('dragenter', function (e) { e.preventDefault(); counter++; zone.classList.add('drag-over'); });
            zone.addEventListener('dragleave', function () { counter--; if (counter <= 0) { counter = 0; zone.classList.remove('drag-over'); } });
            zone.addEventListener('dragover', function (e) { e.preventDefault(); });
            zone.addEventListener('drop', function () { counter = 0; zone.classList.remove('drag-over'); });

            AjaxUploader.create(document.getElementById(uploaderId), {
                uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
                multiple: true,
                autoUpload: true,
                allowedExtensions: exts,
                dropTarget: zone,
                onTaskComplete: function (task) {
                    var p = document.createElement('div');
                    p.textContent = '+ ' + task.fileName;
                    files.appendChild(p);
                }
            });
        }
        setupZone('uploaderA', 'zoneA', 'filesA', '.pdf,.docx,.txt,.xlsx');
        setupZone('uploaderB', 'zoneB', 'filesB', '.jpg,.png,.gif,.webp,.svg');
    })();
</script>
</asp:Content>
