@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.CreateShipmentModel
@{
    // Layout = "_AdminLayout";
    ViewBag.PageTitle = "Create Shipment";
    NopHtml.SetActiveMenuItemSystemName("Shipments.Create");
}

<form asp-action="Create" method="post" enctype="multipart/form-data">
    <div class="content-header clearfix">
        <h1 class="float-left">
            <i class="fas fa-plus"></i>
            Create New Shipment
        </h1>
        <div class="float-right">
            <button type="submit" name="save" class="btn btn-primary">
                <i class="far fa-save"></i>
                Save
            </button>
            <a asp-action="List" class="btn btn-default">
                <i class="fas fa-arrow-left"></i>
                Back to List
            </a>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="form-horizontal">
                <div class="cards-group">
                    <!-- Basic Information -->
                    <div class="card card-default">
                        <div class="card-header">
                            <div class="card-title">Shipment Information</div>
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="ShipmentName" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="ShipmentName" required="true" />
                                    <span asp-validation-for="ShipmentName"></span>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="Description" />
                                </div>
                                <div class="col-md-9">
                                    <textarea asp-for="Description" class="form-control" rows="3"></textarea>
                                    <span asp-validation-for="Description"></span>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="ShipmentDate" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="ShipmentDate" asp-template="DateTime" required="true" />
                                    <span asp-validation-for="ShipmentDate"></span>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="TrackingNumber" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="TrackingNumber" />
                                    <span asp-validation-for="TrackingNumber"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- File Upload Section -->
                    <div class="card card-default">
                        <div class="card-header">
                            <div class="card-title">
                                <i class="fas fa-file-pdf"></i>
                                Upload Documents (PDF only)
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Drag & Drop Zone -->
                            <div id="dropZone" class="drop-zone">
                                <div class="drop-zone-content">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
                                    <h4>Drag & Drop PDF files here</h4>
                                    <p class="text-muted">or click to select files</p>
                                    <input type="file" id="fileInput" multiple accept=".pdf" style="display: none;">
                                    <button type="button" id="selectFilesBtn" class="btn btn-outline-primary">
                                        <i class="fas fa-folder-open"></i>
                                        Select Files
                                    </button>
                                </div>
                            </div>

                            <!-- Upload Progress -->
                            <div id="uploadProgress" style="display: none;">
                                <div class="progress mb-3">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                                </div>
                                <p id="uploadStatus" class="text-center"></p>
                            </div>

                            <!-- Uploaded Files List -->
                            <div id="uploadedFiles" class="mt-3">
                                <h5>Uploaded Files:</h5>
                                <div id="filesList" class="list-group">
                                    <!-- Uploaded files will appear here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</form>

<style>
    .drop-zone {
        border: 2px dashed #dee2e6;
        border-radius: 10px;
        padding: 40px;
        text-align: center;
        transition: all 0.3s ease;
        background-color: #f8f9fa;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .drop-zone:hover,
        .drop-zone.drag-over {
            border-color: #007bff;
            background-color: rgba(0, 123, 255, 0.05);
        }

    .drop-zone-content {
        pointer-events: none;
    }

    .file-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        margin-bottom: 5px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        background-color: #fff;
    }

        .file-item .file-info {
            display: flex;
            align-items: center;
        }

            .file-item .file-info i {
                margin-right: 10px;
                color: #dc3545;
            }

        .file-item .file-actions button {
            margin-left: 5px;
        }

    .upload-error {
        border-color: #dc3545;
        background-color: rgba(220, 53, 69, 0.05);
    }
</style>

<script>
    $(document).ready(function() {
        let uploadedFiles = [];

        // File input and drop zone elements
        const dropZone = document.getElementById('dropZone');
        const fileInput = document.getElementById('fileInput');
        const selectFilesBtn = document.getElementById('selectFilesBtn');

        // Click to select files
        selectFilesBtn.addEventListener('click', () => fileInput.click());
        dropZone.addEventListener('click', (e) => {
            if (e.target === dropZone || e.target.closest('.drop-zone-content')) {
                fileInput.click();
            }
        });

        // File input change
        fileInput.addEventListener('change', handleFiles);

        // Drag and drop events
        dropZone.addEventListener('dragover', handleDragOver);
        dropZone.addEventListener('dragenter', handleDragEnter);
        dropZone.addEventListener('dragleave', handleDragLeave);
        dropZone.addEventListener('drop', handleDrop);

        function handleDragOver(e) {
            e.preventDefault();
            dropZone.classList.add('drag-over');
        }

        function handleDragEnter(e) {
            e.preventDefault();
            dropZone.classList.add('drag-over');
        }

        function handleDragLeave(e) {
            e.preventDefault();
            if (!dropZone.contains(e.relatedTarget)) {
                dropZone.classList.remove('drag-over');
            }
        }

        function handleDrop(e) {
            e.preventDefault();
            dropZone.classList.remove('drag-over');

            const files = e.dataTransfer.files;
            processFiles(files);
        }

        function handleFiles(e) {
            const files = e.target.files;
            processFiles(files);
        }

        function processFiles(files) {
            Array.from(files).forEach(file => {
                if (file.type === 'application/pdf') {
                    uploadFile(file);
                } else {
                    showError(`"${file.name}" is not a PDF file. Only PDF files are allowed.`);
                }
            });
        }

        function uploadFile(file) {
            const formData = new FormData();
            formData.append('file', file);

            // Show upload progress
            showUploadProgress(`Uploading ${file.name}...`);

            $.ajax({
                url: '@Url.Action("UploadFile")',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(result) {
                    hideUploadProgress();

                    if (result.success) {
                        uploadedFiles.push(result);
                        addFileToList(result);
                        showSuccess(`"${result.fileName}" uploaded successfully`);
                    } else {
                        showError(`Upload failed: ${result.errorMessage}`);
                    }
                },
                error: function(xhr, status, error) {
                    hideUploadProgress();
                    showError(`Upload failed: ${error}`);
                }
            });
        }

        function addFileToList(file) {
            const filesList = document.getElementById('filesList');
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            fileItem.innerHTML = `
                <div class="file-info">
                    <i class="fas fa-file-pdf"></i>
                    <span>${file.fileName}</span>
                </div>
                <div class="file-actions">
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="viewFile('${file.filePath}')">
                        <i class="fas fa-eye"></i> View
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteFile('${file.filePath}', this)">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </div>
            `;
            filesList.appendChild(fileItem);

            // Show the uploaded files section
            document.getElementById('uploadedFiles').style.display = 'block';
        }

        function showUploadProgress(message) {
            const progressDiv = document.getElementById('uploadProgress');
            const statusText = document.getElementById('uploadStatus');

            statusText.textContent = message;
            progressDiv.style.display = 'block';

            // Animate progress bar
            const progressBar = progressDiv.querySelector('.progress-bar');
            progressBar.style.width = '100%';
        }

        function hideUploadProgress() {
            document.getElementById('uploadProgress').style.display = 'none';
            const progressBar = document.querySelector('#uploadProgress .progress-bar');
            progressBar.style.width = '0%';
        }

        function showError(message) {
            // Use nopCommerce's notification system
            displayBarNotification(message, 'error', 5000);
        }

        function showSuccess(message) {
            // Use nopCommerce's notification system
            displayBarNotification(message, 'success', 3000);
        }

        // Global functions for file actions
        window.viewFile = function(filePath) {
            window.open(filePath, '_blank');
        };

        window.deleteFile = function(filePath, button) {
            if (confirm('Are you sure you want to delete this file?')) {
                $.post('@Url.Action("DeleteUploadedFile")', { filePath: filePath })
                    .done(function(result) {
                        if (result.success) {
                            // Remove from uploaded files array
                            uploadedFiles = uploadedFiles.filter(f => f.filePath !== filePath);

                            // Remove from DOM
                            const fileItem = button.closest('.file-item');
                            fileItem.remove();

                            // Hide uploaded files section if no files remain
                            if (uploadedFiles.length === 0) {
                                document.getElementById('uploadedFiles').style.display = 'none';
                            }

                            showSuccess('File deleted successfully');
                        } else {
                            showError('Failed to delete file: ' + result.message);
                        }
                    })
                    .fail(function() {
                        showError('Failed to delete file');
                    });
            }
        };
    });
</script>