@extends('layouts.admin')

@section('title', 'آپلود فایل جدید')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">آپلود فایل جدید</h1>
        <a href="{{ route('admin.media.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right ms-2"></i>
            بازگشت به لیست
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('admin.media.store') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                @csrf

                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-4">
                            <label class="form-label">انتخاب فایل‌ها</label>
                            <div class="dropzone border rounded p-4 text-center" id="dropzone">
                                <div class="dz-message">
                                    <i class="fas fa-cloud-upload-alt fa-3x mb-3 text-primary"></i>
                                    <h5>فایل‌ها را اینجا رها کنید</h5>
                                    <p class="text-muted">یا برای انتخاب فایل کلیک کنید</p>
                                </div>
                                <input type="file" 
                                       class="d-none" 
                                       id="fileInput" 
                                       name="files[]" 
                                       multiple 
                                       accept="image/*,video/*,audio/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                            </div>
                            <div id="preview" class="row g-2 mt-3"></div>
                            @error('files')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="title" class="form-label">عنوان پیش‌فرض</label>
                            <input type="text" 
                                   class="form-control @error('title') is-invalid @enderror" 
                                   id="title" 
                                   name="title" 
                                   value="{{ old('title') }}">
                            <small class="text-muted">اگر خالی باشد، نام فایل استفاده می‌شود.</small>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">توضیحات</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="alt_text" class="form-label">متن جایگزین</label>
                            <input type="text" 
                                   class="form-control @error('alt_text') is-invalid @enderror" 
                                   id="alt_text" 
                                   name="alt_text" 
                                   value="{{ old('alt_text') }}">
                            <small class="text-muted">برای تصاویر استفاده می‌شود.</small>
                            @error('alt_text')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="category" class="form-label">دسته‌بندی</label>
                            <select class="form-select @error('category') is-invalid @enderror" 
                                    id="category" 
                                    name="category" 
                                    required>
                                <option value="">انتخاب دسته‌بندی</option>
                                <option value="عمومی" {{ old('category') == 'عمومی' ? 'selected' : '' }}>عمومی</option>
                                <option value="محصولات" {{ old('category') == 'محصولات' ? 'selected' : '' }}>محصولات</option>
                                <option value="خدمات" {{ old('category') == 'خدمات' ? 'selected' : '' }}>خدمات</option>
                                <option value="نمونه کارها" {{ old('category') == 'نمونه کارها' ? 'selected' : '' }}>نمونه کارها</option>
                                <option value="مقالات" {{ old('category') == 'مقالات' ? 'selected' : '' }}>مقالات</option>
                                <option value="مستندات" {{ old('category') == 'مستندات' ? 'selected' : '' }}>مستندات</option>
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" 
                                       class="form-check-input @error('is_public') is-invalid @enderror" 
                                       id="is_public" 
                                       name="is_public" 
                                       value="1" 
                                       {{ old('is_public') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_public">دسترسی عمومی</label>
                                @error('is_public')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <h6 class="alert-heading mb-2">محدودیت‌ها:</h6>
                            <ul class="mb-0 ps-3">
                                <li>حداکثر حجم هر فایل: 10 مگابایت</li>
                                <li>فرمت‌های مجاز: تصاویر، ویدیو، صدا، PDF، Word، Excel</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                        <i class="fas fa-upload ms-2"></i>
                        آپلود فایل‌ها
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
.dropzone {
    border: 2px dashed #dee2e6;
    border-radius: 0.25rem;
    background: #f8f9fa;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dropzone:hover {
    border-color: #0d6efd;
    background: #f1f3f5;
}

.dropzone.dragover {
    border-color: #0d6efd;
    background: #e7f5ff;
}

.preview-item {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow: hidden;
}

.preview-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.preview-item .remove-file {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #dc3545;
}

.preview-item .file-info {
    padding: 0.5rem;
    background: #f8f9fa;
    font-size: 0.875rem;
}

.preview-item .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-item .file-size {
    color: #6c757d;
    font-size: 0.75rem;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropzone = document.getElementById('dropzone');
    const fileInput = document.getElementById('fileInput');
    const preview = document.getElementById('preview');
    const submitBtn = document.getElementById('submitBtn');
    const form = document.getElementById('uploadForm');
    let files = [];

    // Handle drag and drop events
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropzone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropzone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropzone.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropzone.classList.add('dragover');
    }

    function unhighlight(e) {
        dropzone.classList.remove('dragover');
    }

    // Handle file drop
    dropzone.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const droppedFiles = dt.files;
        handleFiles(droppedFiles);
    }

    // Handle file input change
    fileInput.addEventListener('change', function() {
        handleFiles(this.files);
    });

    // Handle click on dropzone
    dropzone.addEventListener('click', function() {
        fileInput.click();
    });

    function handleFiles(newFiles) {
        const validFiles = Array.from(newFiles).filter(file => {
            const maxSize = 10 * 1024 * 1024; // 10MB
            const validTypes = [
                'image/',
                'video/',
                'audio/',
                'application/pdf',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'application/vnd.ms-excel',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ];

            if (file.size > maxSize) {
                alert(`فایل "${file.name}" بزرگتر از 10 مگابایت است.`);
                return false;
            }

            if (!validTypes.some(type => file.type.startsWith(type))) {
                alert(`فرمت فایل "${file.name}" پشتیبانی نمی‌شود.`);
                return false;
            }

            return true;
        });

        files = [...files, ...validFiles];
        updatePreview();
        updateSubmitButton();
    }

    function updatePreview() {
        preview.innerHTML = '';
        files.forEach((file, index) => {
            const div = document.createElement('div');
            div.className = 'col-md-3 col-lg-2';
            div.innerHTML = `
                <div class="preview-item">
                    ${file.type.startsWith('image/') 
                        ? `<img src="${URL.createObjectURL(file)}" alt="${file.name}">`
                        : `<div class="d-flex align-items-center justify-content-center" style="height: 100px; background: #f8f9fa;">
                             <i class="fas fa-file fa-3x text-secondary"></i>
                           </div>`
                    }
                    <div class="remove-file" data-index="${index}">
                        <i class="fas fa-times"></i>
                    </div>
                    <div class="file-info">
                        <div class="file-name" title="${file.name}">${file.name}</div>
                        <div class="file-size">${formatFileSize(file.size)}</div>
                    </div>
                </div>
            `;
            preview.appendChild(div);
        });

        // Add remove file handlers
        document.querySelectorAll('.remove-file').forEach(button => {
            button.addEventListener('click', function() {
                const index = parseInt(this.dataset.index);
                files.splice(index, 1);
                updatePreview();
                updateSubmitButton();
            });
        });
    }

    function updateSubmitButton() {
        submitBtn.disabled = files.length === 0;
    }

    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(1)) + ' ' + sizes[i];
    }

    // Handle form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();

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

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin ms-2"></i> در حال آپلود...';

        fetch(form.action, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ route('admin.media.index') }}';
            } else {
                alert(data.message || 'خطا در آپلود فایل‌ها');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-upload ms-2"></i> آپلود فایل‌ها';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('خطا در آپلود فایل‌ها');
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-upload ms-2"></i> آپلود فایل‌ها';
        });
    });
});
</script>
@endpush
@endsection