@extends('layouts.user')

@section('title', 'Create Support Ticket')
@section('page-title', 'Create Support Ticket')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0"><i class="fas fa-plus-circle me-2"></i>Create New Support Ticket</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('user.tickets.store') }}" method="POST" id="ticketForm">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="category" class="form-label">Category *</label>
                                <select class="form-control @error('category') is-invalid @enderror" 
                                        id="category" name="category" required>
                                    <option value="">Select Category</option>
                                    <option value="technical" {{ old('category') == 'technical' ? 'selected' : '' }}>Technical Support</option>
                                    <option value="billing" {{ old('category') == 'billing' ? 'selected' : '' }}>Billing & Payment</option>
                                    <option value="other" {{ old('category') == 'other' ? 'selected' : '' }}>Other Issues</option>
                                </select>
                                @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="priority" class="form-label">Priority *</label>
                                <select class="form-control @error('priority') is-invalid @enderror" 
                                        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>
                                </select>
                                @error('priority')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="subject" class="form-label">Subject *</label>
                        <input type="text" class="form-control @error('subject') is-invalid @enderror" 
                               id="subject" name="subject" value="{{ old('subject') }}" 
                               placeholder="Enter a brief subject for your ticket" required>
                        @error('subject')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="description" class="form-label">Description *</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" name="description" rows="8" 
                                  placeholder="Please describe your issue in detail. Include any error messages, steps to reproduce, and what you were trying to achieve."
                                  required>{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="mt-2">
                            <small class="text-muted">
                                <span id="char-count">0</span>/5000 characters
                            </small>
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label for="attachments" class="form-label">Attachments (Optional)</label>
                        <input type="file" class="form-control @error('attachments') is-invalid @enderror" 
                               id="attachments" name="attachments[]" multiple 
                               accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx">
                        @error('attachments')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">
                            You can attach multiple files. Maximum file size: 5MB each. Supported formats: JPG, PNG, GIF, PDF, DOC, DOCX
                        </small>
                        <div id="file-previews" class="mt-2"></div>
                    </div>

                    <!-- Category-specific Guidance -->
                    <div class="alert alert-info" id="categoryGuidance">
                        <h6 class="alert-heading" id="guidanceTitle">General Guidance</h6>
                        <div id="guidanceContent">
                            <div class="category-guidance" id="guidance_technical" style="display: none;">
                                <p><strong>For Technical Issues:</strong></p>
                                <ul>
                                    <li>Include specific error messages</li>
                                    <li>Describe steps to reproduce the issue</li>
                                    <li>Mention your browser and operating system</li>
                                    <li>Include screenshots if possible</li>
                                </ul>
                            </div>
                            <div class="category-guidance" id="guidance_billing" style="display: none;">
                                <p><strong>For Billing Issues:</strong></p>
                                <ul>
                                    <li>Include transaction ID and date</li>
                                    <li>Mention payment method used</li>
                                    <li>Describe the issue clearly</li>
                                    <li>Attach payment screenshot if available</li>
                                </ul>
                            </div>
                            <div class="category-guidance" id="guidance_other" style="display: none;">
                                <p><strong>For Other Issues:</strong></p>
                                <ul>
                                    <li>Describe your issue in detail</li>
                                    <li>Include any relevant information</li>
                                    <li>Let us know how we can help you</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-warning">
                        <i class="fas fa-clock me-2"></i>
                        <strong>Response Time:</strong> 
                        <ul class="mb-0 mt-2">
                            <li><strong>High Priority:</strong> 2-4 hours during business hours</li>
                            <li><strong>Medium Priority:</strong> 4-8 hours during business hours</li>
                            <li><strong>Low Priority:</strong> 24 hours</li>
                        </ul>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('user.tickets.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Tickets
                        </a>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fas fa-paper-plane me-2"></i>Create Ticket
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Character count for description
    $('#description').on('input', function() {
        const length = $(this).val().length;
        $('#char-count').text(length);
        
        if (length > 5000) {
            $('#char-count').addClass('text-danger');
        } else {
            $('#char-count').removeClass('text-danger');
        }
    });

    // Category guidance
    $('#category').change(function() {
        const category = $(this).val();
        
        // Hide all guidance
        $('.category-guidance').hide();
        
        // Show specific guidance
        if (category) {
            $('#guidance_' + category).show();
            $('#guidanceTitle').text(category.charAt(0).toUpperCase() + category.slice(1) + ' Guidance');
        } else {
            $('#guidanceTitle').text('General Guidance');
        }
    });

    // File upload preview
    $('#attachments').change(function() {
        const files = $(this)[0].files;
        const previews = $('#file-previews');
        previews.empty();
        
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const fileSize = (file.size / (1024 * 1024)).toFixed(2);
            
            if (file.size > 5 * 1024 * 1024) {
                toastr.error(`File "${file.name}" is too large. Maximum size is 5MB.`);
                continue;
            }
            
            const preview = $(`
                <div class="file-preview d-flex align-items-center border rounded p-2 mb-2">
                    <i class="fas fa-file me-2 text-muted"></i>
                    <div class="file-info flex-grow-1">
                        <div class="file-name">${file.name}</div>
                        <div class="file-size text-muted">${fileSize} MB</div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-file" data-file-index="${i}">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `);
            
            previews.append(preview);
        }
    });

    // Remove file from preview
    $(document).on('click', '.remove-file', function() {
        const fileIndex = $(this).data('file-index');
        const input = $('#attachments')[0];
        const dt = new DataTransfer();
        
        // Recreate files list without the removed file
        for (let i = 0; i < input.files.length; i++) {
            if (i !== fileIndex) {
                dt.items.add(input.files[i]);
            }
        }
        
        input.files = dt.files;
        $(this).closest('.file-preview').remove();
    });

    // Form submission
    $('#ticketForm').submit(function(e) {
        const description = $('#description').val();
        if (description.length > 5000) {
            e.preventDefault();
            toastr.error('Description must be less than 5000 characters');
            return false;
        }
        
        $('#submitBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Creating...');
    });

    // Initialize category guidance
    $('#category').trigger('change');
});
</script>
@endpush

@push('styles')
<style>
.file-preview {
    background: #f8f9fa;
    transition: background-color 0.2s;
}

.file-preview:hover {
    background: #e9ecef;
}

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

.file-size {
    font-size: 12px;
}

.category-guidance ul {
    margin-bottom: 0;
}
</style>
@endpush