@extends('layouts.main')

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

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #E3F2FD;">
                            <i class="bx bx-plus"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Create Support Ticket</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-support"></i>
                                Get help from our support team
                            </h5>
                        </div>
                    </div>
                    <a href="{{ route('support.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Back to List
                    </a>
                </div>

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <form action="{{ route('support.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Type <span class="text-danger">*</span></label>
                                <div class="mt-2">
                                    <div class="form-check">
                                        <input class="form-check-input @error('type') is-invalid @enderror" 
                                               type="radio" 
                                               name="type" 
                                               id="type_billing" 
                                               value="1" 
                                               {{ old('type') == '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="type_billing">
                                            <i class="bx bx-credit-card me-2"></i>Account / Billing
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input @error('type') is-invalid @enderror" 
                                               type="radio" 
                                               name="type" 
                                               id="type_technical" 
                                               value="2" 
                                               {{ old('type') == '2' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="type_technical">
                                            <i class="bx bx-cog me-2"></i>Technical
                                        </label>
                                    </div>
                                </div>
                                @error('type')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('subject') is-invalid @enderror" 
                                       id="subject" 
                                       name="subject" 
                                       value="{{ old('subject') }}" 
                                       maxlength="255"
                                       placeholder="Brief description of your issue">
                                @error('subject')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                                <textarea class="form-control editor @error('description') is-invalid @enderror" 
                                          id="description" 
                                          name="description" 
                                          rows="8"
                                          placeholder="Please provide detailed information about your issue">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="attachments" class="form-label">Attachments</label>
                                <input type="file" 
                                       class="form-control @error('attachments.*') is-invalid @enderror" 
                                       id="attachments" 
                                       name="attachments[]" 
                                       multiple
                                       accept=".jpg,.jpeg,.png,.pdf,.zip">
                                <div class="form-text">
                                    You can upload multiple files (JPG, PNG, PDF, ZIP only). Maximum size: 10MB per file.
                                </div>
                                @error('attachments.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2 justify-content-end mt-4">
                        <a href="{{ route('support.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-x"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-check"></i> Create Ticket
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="{{ asset('/libs/tinymce/tinymce.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize TinyMCE
    tinymce.init({
        selector:'.editor',
        theme: "modern",
        height: 300,
        plugins: [
            "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "save table contextmenu directionality emoticons template paste textcolor"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
        style_formats: [
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],
        init_instance_callback: function (editor) {
            console.log('TinyMCE editor initialized for: ' + editor.id);
        }
    });

    // File upload preview
    const fileInput = document.getElementById('attachments');
    const filePreview = document.createElement('div');
    filePreview.className = 'mt-2';
    fileInput.parentNode.appendChild(filePreview);

    fileInput.addEventListener('change', function(e) {
        filePreview.innerHTML = '';
        
        if (e.target.files.length > 0) {
            const fileList = document.createElement('div');
            fileList.className = 'border rounded p-2 bg-light';
            
            Array.from(e.target.files).forEach(file => {
                const fileItem = document.createElement('div');
                fileItem.className = 'd-flex align-items-center justify-content-between p-2 border-bottom';
                fileItem.innerHTML = `
                    <div class="d-flex align-items-center">
                        <i class="bx bx-file me-2"></i>
                        <span>${file.name}</span>
                        <small class="text-muted ms-2">(${(file.size / 1024 / 1024).toFixed(2)} MB)</small>
                    </div>
                `;
                fileList.appendChild(fileItem);
            });
            
            filePreview.appendChild(fileList);
        }
    });
});
</script>
@endsection