@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h3 class="font-weight-bold mb-0 text-dark">Create New Reseller Ticket</h3>
                        </div>
                        <div class="col-lg-4 text-lg-right">
                            <button type="button" onclick="history.back()" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('reseller-tickets.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="user_id">Reseller <span class="text-danger">*</span></label>
                                    @if(isset($isReseller) && $isReseller && $resellers->count() == 1)
                                        @php
                                            $reseller = $resellers->first();
                                        @endphp
                                        <input type="hidden" name="user_id" value="{{ $reseller->id }}">
                                        <input type="text" class="form-control" value="{{ $reseller->company_name ?? ($reseller->reseller->name ?? $reseller->name) }} @if($reseller->email)({{ $reseller->email }})@endif" readonly style="background-color: #e9ecef;">
                                    @else
                                    <select name="user_id" id="user_id" class="form-control" required>
                                        <option value="">Select Reseller</option>
                                        @foreach($resellers as $reseller)
                                            <option value="{{ $reseller->id }}" {{ old('user_id') == $reseller->id ? 'selected' : '' }}>
                                                    {{ $reseller->company_name ?? ($reseller->reseller->name ?? $reseller->name) }} @if($reseller->email)({{ $reseller->email }})@endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @endif
                                    @error('user_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="priority">Priority <span class="text-danger">*</span></label>
                                    <select name="priority" id="priority" class="form-control" required>
                                        <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ old('priority', 'high') == '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 class="col-md-3">
                                <div class="form-group">
                                    <label for="category_id">Complaint Category <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <select name="category_id" id="category_id" class="form-control" required>
                                            <option value="">Select Complaint Category</option>
                                            @foreach($complaintCategories as $complaintCategory)
                                                <option value="{{ $complaintCategory->id }}" {{ old('category_id') == $complaintCategory->id ? 'selected' : '' }}>
                                                    {{ $complaintCategory->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if(!isset($isReseller) || !$isReseller)
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#addCategoryModal" title="Add New Category">
                                                <i class="fas fa-plus"></i> Add
                                            </button>
                                        </div>
                                        @endif
                                    </div>
                                    @error('category_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="reseller_complaint_subcategory_id">Complaint Sub Category</label>
                                    <div class="input-group">
                                        <select name="reseller_complaint_subcategory_id" id="reseller_complaint_subcategory_id" class="form-control">
                                            <option value="">Select Complaint Sub Category</option>
                                            @if(old('category_id'))
                                                @php
                                                    $selectedCategoryId = old('category_id');
                                                    $subcategories = \App\Models\ResellerComplaintSubcategory::active()
                                                        ->where('reseller_complaint_category_id', $selectedCategoryId)
                                                        ->orderBy('name')
                                                        ->get();
                                                @endphp
                                                @foreach($subcategories as $subcategory)
                                                    <option value="{{ $subcategory->id }}" {{ old('reseller_complaint_subcategory_id') == $subcategory->id ? 'selected' : '' }}>
                                                        {{ $subcategory->name }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @if(!isset($isReseller) || !$isReseller)
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-sm btn-success" id="addSubcategoryBtn" data-toggle="modal" data-target="#addSubcategoryModal" title="Add New Sub Category" disabled>
                                                <i class="fas fa-plus"></i> Add
                                            </button>
                                        </div>
                                        @endif
                                    </div>
                                    @error('reseller_complaint_subcategory_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="reseller_contact_number">Reseller Contact Number</label>
                                    <input type="text" id="reseller_contact_number" class="form-control" readonly 
                                           value="{{ isset($resellerContactNumber) && $resellerContactNumber ? $resellerContactNumber : '' }}" 
                                           placeholder="{{ isset($isReseller) && $isReseller ? 'Contact number' : 'Select a reseller to see contact number' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="complained_number">Complained Number</label>
                                    <input type="text" name="complained_number" id="complained_number" class="form-control" value="{{ old('complained_number') }}" placeholder="Enter complained number">
                                    @error('complained_number')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" class="form-control" rows="5">{{ old('description') }}</textarea>
                            @error('description')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="notes">Additional Notes</label>
                            <textarea name="notes" id="notes" class="form-control" rows="3">{{ old('notes') }}</textarea>
                            @error('notes')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="attachments">Attachments (Images/Files)</label>
                            <input type="file" name="attachments[]" id="attachments" class="form-control" multiple accept="image/*,.pdf,.doc,.docx,.txt,.xls,.xlsx">
                            <small class="form-text text-muted">You can select multiple files. Supported formats: Images (JPG, PNG, GIF, WEBP), Documents (PDF, DOC, DOCX, TXT, XLS, XLSX). Max file size: 10MB per file.</small>
                            @error('attachments.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            @error('attachments')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            <div id="filePreview" class="mt-3"></div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Create Ticket
                            </button>
                            <button type="button" onclick="history.back()" class="btn btn-secondary">
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Reseller contact number display
    const resellerSelect = document.getElementById('user_id');
    const resellerContactInput = document.getElementById('reseller_contact_number');
    
    // Function to load contact number for a reseller
    function loadResellerContact(resellerId) {
        if (!resellerId || !resellerContactInput) {
                return;
            }
            
            // Fetch reseller's contact number
            fetch(`/api/resellers/${resellerId}/contact`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.phone) {
                        resellerContactInput.value = data.phone;
                    } else {
                        resellerContactInput.value = '';
                        resellerContactInput.placeholder = 'No contact number available';
                    }
                })
                .catch(error => {
                    console.error('Error loading reseller contact:', error);
                    resellerContactInput.value = '';
                    resellerContactInput.placeholder = 'Error loading contact number';
                });
    }
    
    if (resellerSelect && resellerContactInput) {
        // Load contact number on dropdown change
        resellerSelect.addEventListener('change', function() {
            const resellerId = this.value;
            
            // Clear contact number if no reseller selected
            if (!resellerId) {
                resellerContactInput.value = '';
                resellerContactInput.placeholder = 'Select a reseller to see contact number';
                return;
            }
            
            loadResellerContact(resellerId);
        });
        
        // Load contact number if reseller is pre-selected (for admin/super admin when old value exists)
        @if(old('user_id'))
            loadResellerContact({{ old('user_id') }});
        @elseif(isset($isReseller) && $isReseller && $resellers->count() == 1)
            // Contact number is already set via PHP value attribute
        @else
            // Check if user_id is in URL query parameter
            const urlParams = new URLSearchParams(window.location.search);
            const userIdFromUrl = urlParams.get('user_id');
            if (userIdFromUrl) {
                loadResellerContact(userIdFromUrl);
                // Also set the select value
                if (resellerSelect) {
                    resellerSelect.value = userIdFromUrl;
                }
            } else if (resellerSelect && resellerSelect.value) {
                loadResellerContact(resellerSelect.value);
            }
        @endif
    }
    
    // Complaint Category and Complaint Sub Category
    const categorySelect = document.getElementById('category_id');
    const subcategorySelect = document.getElementById('reseller_complaint_subcategory_id');
    
    // Function to load subcategories
    function loadSubcategories(categoryId) {
        if (!subcategorySelect) return;
        
        // Clear subcategory options
        subcategorySelect.innerHTML = '<option value="">Select Complaint Sub Category</option>';
        
        if (categoryId) {
            // Fetch subcategories for selected category
            fetch(`/api/reseller-complaint-subcategories/${categoryId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.subcategories) {
                        data.subcategories.forEach(subcategory => {
                            const option = document.createElement('option');
                            option.value = subcategory.id;
                            option.textContent = subcategory.name;
                            subcategorySelect.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('Error loading subcategories:', error);
                });
        }
    }
    
    // Enable/disable subcategory add button based on category selection
    const addSubcategoryBtn = document.getElementById('addSubcategoryBtn');
    if (addSubcategoryBtn) {
        // Check initial state
        if (categorySelect && categorySelect.value) {
            addSubcategoryBtn.disabled = false;
        }
    }
    
    // Listen to category_id changes
    if (categorySelect && subcategorySelect) {
        categorySelect.addEventListener('change', function() {
            loadSubcategories(this.value);
            
            // Enable/disable subcategory add button
            if (addSubcategoryBtn) {
                addSubcategoryBtn.disabled = !this.value;
            }
        });
        
        // Trigger change event if category is pre-selected
        if (categorySelect.value) {
            loadSubcategories(categorySelect.value);
        }
    }

    // File preview functionality
    const fileInput = document.getElementById('attachments');
    const filePreview = document.getElementById('filePreview');
    
    if (fileInput && filePreview) {
        fileInput.addEventListener('change', function(e) {
            filePreview.innerHTML = '';
            
            if (this.files.length > 0) {
                const fileList = document.createElement('div');
                fileList.className = 'row';
                
                Array.from(this.files).forEach((file, index) => {
                    const fileCol = document.createElement('div');
                    fileCol.className = 'col-md-3 mb-2';
                    
                    const fileCard = document.createElement('div');
                    fileCard.className = 'card';
                    
                    if (file.type.startsWith('image/')) {
                        const img = document.createElement('img');
                        img.src = URL.createObjectURL(file);
                        img.className = 'card-img-top';
                        img.style.height = '150px';
                        img.style.objectFit = 'cover';
                        fileCard.appendChild(img);
                    }
                    
                    const cardBody = document.createElement('div');
                    cardBody.className = 'card-body p-2';
                    
                    const fileName = document.createElement('small');
                    fileName.className = 'd-block text-truncate';
                    fileName.textContent = file.name;
                    fileName.title = file.name;
                    
                    const fileSize = document.createElement('small');
                    fileSize.className = 'd-block text-muted';
                    fileSize.textContent = (file.size / 1024).toFixed(2) + ' KB';
                    
                    cardBody.appendChild(fileName);
                    cardBody.appendChild(fileSize);
                    fileCard.appendChild(cardBody);
                    fileCol.appendChild(fileCard);
                    fileList.appendChild(fileCol);
                });
                
                filePreview.appendChild(fileList);
            }
        });
    }
});
</script>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCategoryModalLabel">Add New Complaint Category</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addCategoryForm">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="new_category_name">Category Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="new_category_name" name="name" required placeholder="Enter category name">
                        <small class="form-text text-muted">Enter a unique name for the complaint category</small>
                    </div>
                    <div class="form-group">
                        <label for="new_category_description">Description</label>
                        <textarea class="form-control" id="new_category_description" name="description" rows="3" placeholder="Enter description (optional)"></textarea>
                    </div>
                    <div id="categoryError" class="alert alert-danger" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Create Category
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Subcategory Modal -->
<div class="modal fade" id="addSubcategoryModal" tabindex="-1" role="dialog" aria-labelledby="addSubcategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addSubcategoryModalLabel">Add New Complaint Sub Category</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addSubcategoryForm">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="new_subcategory_name">Sub Category Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="new_subcategory_name" name="name" required placeholder="Enter subcategory name">
                        <small class="form-text text-muted">Enter a unique name for the complaint subcategory</small>
                    </div>
                    <div class="form-group">
                        <label for="new_subcategory_description">Description</label>
                        <textarea class="form-control" id="new_subcategory_description" name="description" rows="3" placeholder="Enter description (optional)"></textarea>
                    </div>
                    <input type="hidden" id="selected_category_id" name="reseller_complaint_category_id">
                    <div id="subcategoryError" class="alert alert-danger" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Create Sub Category
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Handle category and subcategory form submissions
document.addEventListener('DOMContentLoaded', function() {
    // Handle category form submission
    const addCategoryForm = document.getElementById('addCategoryForm');
    if (addCategoryForm) {
        addCategoryForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const errorDiv = document.getElementById('categoryError');
            errorDiv.style.display = 'none';
            errorDiv.textContent = '';
            
            fetch('/api/reseller-complaint-categories/quick-create', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw { data, status: response.status };
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Add new option to category select
                    const categorySelect = document.getElementById('category_id');
                    const newOption = document.createElement('option');
                    newOption.value = data.category.id;
                    newOption.textContent = data.category.name;
                    newOption.selected = true;
                    categorySelect.appendChild(newOption);
                    
                    // Close modal and reset form
                    $('#addCategoryModal').modal('hide');
                    addCategoryForm.reset();
                    
                    // Trigger change event to load subcategories
                    categorySelect.dispatchEvent(new Event('change'));
                    
                    // Show success message
                    alert('Category created successfully!');
                } else {
                    let errorMsg = data.message || 'Failed to create category';
                    if (data.errors) {
                        const errorList = Object.values(data.errors).flat().join(', ');
                        errorMsg = errorList || errorMsg;
                    }
                    errorDiv.textContent = errorMsg;
                    errorDiv.style.display = 'block';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                let errorMsg = 'An error occurred while creating the category';
                if (error.data && error.data.message) {
                    errorMsg = error.data.message;
                    if (error.data.errors) {
                        const errorList = Object.values(error.data.errors).flat().join(', ');
                        errorMsg = errorList || errorMsg;
                    }
                }
                errorDiv.textContent = errorMsg;
                errorDiv.style.display = 'block';
            });
        });
    }
    
    // Handle subcategory form submission
    const addSubcategoryForm = document.getElementById('addSubcategoryForm');
    if (addSubcategoryForm) {
        addSubcategoryForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const categoryId = document.getElementById('category_id').value;
            if (!categoryId) {
                alert('Please select a category first');
                return;
            }
            
            const formData = new FormData(this);
            formData.append('reseller_complaint_category_id', categoryId);
            
            const errorDiv = document.getElementById('subcategoryError');
            errorDiv.style.display = 'none';
            errorDiv.textContent = '';
            
            fetch('/api/reseller-complaint-subcategories/quick-create', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw { data, status: response.status };
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Add new option to subcategory select
                    const subcategorySelect = document.getElementById('reseller_complaint_subcategory_id');
                    const newOption = document.createElement('option');
                    newOption.value = data.subcategory.id;
                    newOption.textContent = data.subcategory.name;
                    newOption.selected = true;
                    subcategorySelect.appendChild(newOption);
                    
                    // Close modal and reset form
                    $('#addSubcategoryModal').modal('hide');
                    addSubcategoryForm.reset();
                    
                    // Show success message
                    alert('Subcategory created successfully!');
                } else {
                    let errorMsg = data.message || 'Failed to create subcategory';
                    if (data.errors) {
                        const errorList = Object.values(data.errors).flat().join(', ');
                        errorMsg = errorList || errorMsg;
                    }
                    errorDiv.textContent = errorMsg;
                    errorDiv.style.display = 'block';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                let errorMsg = 'An error occurred while creating the subcategory';
                if (error.data && error.data.message) {
                    errorMsg = error.data.message;
                    if (error.data.errors) {
                        const errorList = Object.values(error.data.errors).flat().join(', ');
                        errorMsg = errorList || errorMsg;
                    }
                }
                errorDiv.textContent = errorMsg;
                errorDiv.style.display = 'block';
            });
        });
    }
    
    // Update selected category ID when opening subcategory modal
    $('#addSubcategoryModal').on('show.bs.modal', function() {
        const categoryId = document.getElementById('category_id').value;
        document.getElementById('selected_category_id').value = categoryId;
    });
});
</script>
@endsection