@extends('layouts.admin')

@section('title', __('Upload Media'))

@section('styles')
<style>
    .upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 10px;
        padding: 40px;
        text-align: center;
        transition: all 0.3s ease;
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .upload-area:hover,
    .upload-area.dragover {
        border-color: #007bff;
        background-color: #e3f2fd;
    }

    .upload-area.dragover {
        border-color: #28a745;
        background-color: #d4edda;
    }

    .file-preview {
        display: none;
        margin-top: 20px;
    }

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

    .file-item img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 5px;
        margin-right: 15px;
    }

    .file-item .file-info {
        flex: 1;
    }

    .file-item .file-name {
        font-weight: 500;
        margin-bottom: 2px;
    }

    .file-item .file-size {
        color: #6c757d;
        font-size: 0.875rem;
    }

    .file-item .remove-file {
        color: #dc3545;
        cursor: pointer;
        padding: 5px;
        border-radius: 3px;
        transition: background-color 0.2s;
    }

    .file-item .remove-file:hover {
        background-color: #f8d7da;
    }

    .progress-container {
        display: none;
        margin-top: 20px;
    }

    .progress {
        height: 25px;
        margin-bottom: 10px;
    }

    .upload-status {
        display: none;
        margin-top: 20px;
    }

    .upload-success {
        color: #28a745;
    }

    .upload-error {
        color: #dc3545;
    }

    .file-input {
        display: none;
    }

    .upload-btn {
        display: none;
        margin-top: 20px;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('Upload Media Files') }}</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.media.library', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> {{ __('Back to Library') }}
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Upload Area -->
                    <div class="upload-area" id="uploadArea">
                        <div class="upload-content">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                            <h4>{{ __('Drag & Drop Files Here') }}</h4>
                            <p class="text-muted">{{ __('or click to browse files') }}</p>
                            <p class="text-muted small">{{ __('Supported formats: Images, Videos, Documents (Max 50MB each)') }}</p>
                            <input type="file" id="fileInput" class="file-input" multiple accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt">
                        </div>
                    </div>

                    <!-- File Preview -->
                    <div class="file-preview" id="filePreview">
                        <h5>{{ __('Selected Files') }}</h5>
                        <div id="fileList"></div>
                        <button type="button" class="btn btn-primary upload-btn" id="uploadBtn">
                            <i class="fas fa-upload"></i> {{ __('Upload Files') }}
                        </button>
                    </div>

                    <!-- Progress Container -->
                    <div class="progress-container" id="progressContainer">
                        <h5>{{ __('Upload Progress') }}</h5>
                        <div class="progress">
                            <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%"></div>
                        </div>
                        <div class="text-center">
                            <span id="progressText">0%</span>
                        </div>
                    </div>

                    <!-- Upload Status -->
                    <div class="upload-status" id="uploadStatus"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Upload Results') }}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="uploadResults">
                <!-- Results will be populated by JavaScript -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                <a href="{{ route('admin.media.library', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">{{ __('View Library') }}</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let selectedFiles = [];
    const maxFileSize = 50 * 1024 * 1024; // 50MB
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4', 'video/avi', 'video/mov', 'audio/mp3', 'audio/wav', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain'];
    const uploadUrl = '{{ route("admin.media.upload", ["locale" => app()->getLocale()]) }}';

    // Upload area events
    const uploadArea = $('#uploadArea');
    const fileInput = $('#fileInput');

    uploadArea.on('click', function() {
        fileInput.click();
    });

    uploadArea.on('dragover', function(e) {
        e.preventDefault();
        $(this).addClass('dragover');
    });

    uploadArea.on('dragleave', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
    });

    uploadArea.on('drop', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');

        const files = e.originalEvent.dataTransfer.files;
        handleFiles(files);
    });

    fileInput.on('change', function() {
        handleFiles(this.files);
    });

    function handleFiles(files) {
        for (let i = 0; i < files.length; i++) {
            const file = files[i];

            // Validate file size
            if (file.size > maxFileSize) {
                showError(`{{ __('File :name is too large. Maximum size is 50MB.') }}`.replace(':name', file.name));
                continue;
            }

            // Validate file type
            if (!allowedTypes.includes(file.type)) {
                showError(`{{ __('File :name has an unsupported format.') }}`.replace(':name', file.name));
                continue;
            }

            // Check if file already selected
            if (selectedFiles.some(f => f.name === file.name && f.size === file.size)) {
                showError(`{{ __('File :name is already selected.') }}`.replace(':name', file.name));
                continue;
            }

            selectedFiles.push(file);
        }

        updateFilePreview();
    }

    function updateFilePreview() {
        const fileList = $('#fileList');
        fileList.empty();

        if (selectedFiles.length > 0) {
            $('#filePreview').show();
            $('.upload-btn').show();

            selectedFiles.forEach((file, index) => {
                const fileItem = createFileItem(file, index);
                fileList.append(fileItem);
            });
        } else {
            $('#filePreview').hide();
            $('.upload-btn').hide();
        }
    }

    function createFileItem(file, index) {
        const fileSize = formatFileSize(file.size);
        const isImage = file.type.startsWith('image/');
        const preview = isImage ? `<img src="${URL.createObjectURL(file)}" alt="${file.name}">` : '<i class="fas fa-file fa-2x text-muted"></i>';

        return `
            <div class="file-item" data-index="${index}">
                <div class="file-preview">
                    ${preview}
                </div>
                <div class="file-info">
                    <div class="file-name">${file.name}</div>
                    <div class="file-size">${fileSize}</div>
                </div>
                <div class="file-actions">
                    <i class="fas fa-times remove-file" onclick="removeFile(${index})"></i>
                </div>
            </div>
        `;
    }

    window.removeFile = function(index) {
        selectedFiles.splice(index, 1);
        updateFilePreview();
    };

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    function showError(message) {
        const status = $('#uploadStatus');
        status.html(`<div class="alert alert-danger">${message}</div>`).show();
        setTimeout(() => status.hide(), 5000);
    }

    function showSuccess(message) {
        const status = $('#uploadStatus');
        status.html(`<div class="alert alert-success">${message}</div>`).show();
        setTimeout(() => status.hide(), 5000);
    }

    // Upload functionality
    $('#uploadBtn').on('click', function() {
        if (selectedFiles.length === 0) return;

        const formData = new FormData();
        selectedFiles.forEach(file => {
            formData.append('files[]', file);
        });

        // Show progress
        $('#progressContainer').show();
        $('#uploadBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> {{ __("Uploading...") }}');

        $.ajax({
            url: uploadUrl,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            xhr: function() {
                const xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percentComplete = Math.round((e.loaded / e.total) * 100);
                        $('#progressBar').css('width', percentComplete + '%');
                        $('#progressText').text(percentComplete + '%');
                    }
                });
                return xhr;
            },
            success: function(response) {
                $('#progressContainer').hide();
                $('#uploadBtn').prop('disabled', false).html('<i class="fas fa-upload"></i> {{ __("Upload Files") }}');

                if (response.success) {
                    showSuccess(response.message);
                    displayUploadResults(response);
                    $('#uploadModal').modal('show');

                    // Clear selected files
                    selectedFiles = [];
                    updateFilePreview();
                } else {
                    showError(response.message);
                }
            },
            error: function(xhr) {
                $('#progressContainer').hide();
                $('#uploadBtn').prop('disabled', false).html('<i class="fas fa-upload"></i> {{ __("Upload Files") }}');

                let errorMessage = '{{ __("Upload failed. Please try again.") }}';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                showError(errorMessage);
            }
        });
    });

    function displayUploadResults(response) {
        const resultsContainer = $('#uploadResults');
        resultsContainer.empty();

        if (response.uploaded && response.uploaded.length > 0) {
            resultsContainer.append('<h6 class="text-success">{{ __("Successfully Uploaded") }}</h6>');
            response.uploaded.forEach(file => {
                resultsContainer.append(`
                    <div class="alert alert-success">
                        <strong>${file.name}</strong> - ${file.size}
                        <br><small>{{ __("URL") }}: ${file.url}</small>
                    </div>
                `);
            });
        }

        if (response.errors && response.errors.length > 0) {
            resultsContainer.append('<h6 class="text-danger">{{ __("Upload Errors") }}</h6>');
            response.errors.forEach(error => {
                resultsContainer.append(`<div class="alert alert-danger">${error}</div>`);
            });
        }
    }
});
</script>
@endsection