@extends('layouts.app')
@section('title')Create Support Ticket @endsection
@section('content')
<style>
    .file-upload-area {
        border: 2px dashed #ddd;
        padding: 30px;
        text-align: center;
        border-radius: 5px;
        background: #f9f9f9;
        transition: border-color 0.3s ease;
    }
    .file-upload-area:hover {
        border-color: #007bff;
    }
    .file-upload-area.dragover {
        border-color: #007bff;
        background: #e3f2fd;
    }
    .file-list {
        margin-top: 15px;
    }
    .file-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        margin-bottom: 5px;
    }
    .file-item .file-info {
        display: flex;
        align-items: center;
    }
    .file-item .file-size {
        color: #6c757d;
        font-size: 12px;
        margin-left: 10px;
    }
    .remove-file {
        color: #dc3545;
        cursor: pointer;
        font-size: 18px;
    }
</style>

<section class="content top-head">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="box box-primary border-no">
                <div class="box-header with-border blue-back">
                    <h3 class="box-title">{{ __('Create Support Ticket') }}</h3>
                </div>
                <div class="box-body">
                    <form method="POST" action="{{ route('support.store') }}" enctype="multipart/form-data" id="ticketForm">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label for="subject">Subject <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="subject" name="subject" 
                                           value="{{ old('subject') }}" required maxlength="255">
                                    @error('subject')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="priority">Priority <span class="text-danger">*</span></label>
                                    <select class="form-control" id="priority" name="priority" required>
                                        <option value="">Select Priority</option>
                                        <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                    </select>
                                    @error('priority')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="category">Category <span class="text-danger">*</span></label>
                                    <select class="form-control" id="category" name="category" required>
                                        <option value="">Select Category</option>
                                        <option value="it" {{ old('category') == 'it' ? 'selected' : '' }}>Technical Support</option>
                                        <option value="account" {{ old('category') == 'account' ? 'selected' : '' }}>Account Manager</option>
                                        <option value="admin" {{ old('category') == 'admin' ? 'selected' : '' }}>Admin</option>
                                    </select>
                                    @error('category')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="description" name="description" rows="6" 
                                      required placeholder="Please describe your issue in detail...">{{ old('description') }}</textarea>
                            @error('description')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Attachments</label>
                            <div class="file-upload-area" id="fileUploadArea">
                                <i class="fa fa-cloud-upload fa-2x text-muted mb-2"></i>
                                <p class="text-muted">Drag and drop files here or click to browse</p>
                                <p class="small text-muted">Maximum file size: 10MB per file</p>
                                <input type="file" id="fileInput" name="attachments[]" multiple accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.txt,.zip" style="display: none;">
                            </div>
                            <div id="fileList" class="file-list"></div>
                            @error('attachments.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                                <i class="fa fa-paper-plane"></i> Create Ticket
                            </button>
                            <a href="{{ route('support.index') }}" class="btn btn-default btn-lg ml-2">
                                <i class="fa fa-arrow-left"></i> Back to Tickets
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileUploadArea = document.getElementById('fileUploadArea');
    const fileInput = document.getElementById('fileInput');
    const fileList = document.getElementById('fileList');
    let selectedFiles = new DataTransfer();

    // Click to browse
    fileUploadArea.addEventListener('click', () => fileInput.click());

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

    // Drag and drop
    fileUploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        fileUploadArea.classList.add('dragover');
    });

    fileUploadArea.addEventListener('dragleave', () => {
        fileUploadArea.classList.remove('dragover');
    });

    fileUploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        fileUploadArea.classList.remove('dragover');
        const files = e.dataTransfer.files;
        addFiles(files);
    });

    function handleFiles(e) {
        addFiles(e.target.files);
    }

    function addFiles(files) {
        for (let file of files) {
            if (file.size > 10 * 1024 * 1024) {
                alert(`File "${file.name}" is too large. Maximum size is 10MB.`);
                continue;
            }
            selectedFiles.items.add(file);
        }
        updateFileList();
        fileInput.files = selectedFiles.files;
    }

    function removeFile(index) {
        selectedFiles.items.remove(index);
        updateFileList();
        fileInput.files = selectedFiles.files;
    }

    function updateFileList() {
        fileList.innerHTML = '';
        for (let i = 0; i < selectedFiles.files.length; i++) {
            const file = selectedFiles.files[i];
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            fileItem.innerHTML = `
                <div class="file-info">
                    <i class="fa fa-file-o"></i>
                    <span class="ml-2">${file.name}</span>
                    <span class="file-size">(${formatFileSize(file.size)})</span>
                </div>
                <span class="remove-file" onclick="removeFile(${i})">&times;</span>
            `;
            fileList.appendChild(fileItem);
        }
    }

    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];
    }

    // Make removeFile function global
    window.removeFile = removeFile;

    // Form submission
    document.getElementById('ticketForm').addEventListener('submit', function() {
        document.getElementById('submitBtn').disabled = true;
        document.getElementById('submitBtn').innerHTML = '<i class="fa fa-spinner fa-spin"></i> Creating...';
    });
});
</script>
@endsection