@extends('SuperAdmin.layout.layout')

@section('title', 'Custom Emoji & GIF Management')

@section('body')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-smile me-2"></i>Custom Emoji & GIF Management
                    </h4>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
                        <i class="fas fa-plus me-2"></i>Upload New
                    </button>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @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"></button>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Content</th>
                                    <th>Status</th>
                                    <th>Created By</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($emojis as $emoji)
                                    <tr data-emoji-id="{{ $emoji->id }}">
                                        <td>{{ $emoji->id }}</td>
                                        <td>{{ $emoji->name }}</td>
                                        <td>
                                            <span class="badge bg-{{ $emoji->type === 'emoji' ? 'info' : 'success' }}">
                                                {{ ucfirst($emoji->type) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($emoji->type === 'emoji')
                                                <span style="font-size: 2rem;">{{ $emoji->emoji_text }}</span>
                                            @else
                                                <img src="{{ asset($emoji->file_path) }}" alt="{{ $emoji->name }}" style="max-height: 40px;">
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $emoji->is_active ? 'success' : 'danger' }}">
                                                {{ $emoji->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td>{{ $emoji->creator_name }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button type="button" 
                                                        class="btn btn-sm btn-warning" 
                                                        onclick="editEmoji('{{ $emoji->id }}')"
                                                        data-emoji-id="{{ $emoji->id }}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button type="button" 
                                                        class="btn btn-sm btn-{{ $emoji->is_active ? 'secondary' : 'success' }}" 
                                                        onclick="toggleStatus('{{ $emoji->id }}')"
                                                        data-emoji-id="{{ $emoji->id }}">
                                                    <i class="fas fa-{{ $emoji->is_active ? 'pause' : 'play' }}"></i>
                                                </button>
                                                <button type="button" 
                                                        class="btn btn-sm btn-danger" 
                                                        onclick="deleteEmoji('{{ $emoji->id }}')"
                                                        data-emoji-id="{{ $emoji->id }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">No emojis or GIFs found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="uploadForm" method="POST" enctype="multipart/form-data" onsubmit="return false;">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Upload New Emoji/GIF</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="type" class="form-label">Type</label>
                        <select class="form-control" id="type" name="type" required onchange="toggleFields()">
                            <option value="">Select Type</option>
                            <option value="emoji">Emoji (Text)</option>
                            <option value="gif">GIF (Image)</option>
                        </select>
                    </div>
                    
                    <div class="mb-3" id="emojiField">
                        <label for="emoji_text" class="form-label">Emoji Text</label>
                        <input type="text" class="form-control" id="emoji_text" name="emoji_text" placeholder="Enter emoji (e.g., 😀, 🎉, 👍)">
                    </div>
                    
                    <div class="mb-3" id="fileField">
                        <label for="file" class="form-label">Upload File</label>
                        <input type="file" class="form-control" id="file" name="file" accept=".png,.jpg,.jpeg,.gif,.webp">
                        <small class="text-muted">Supported: PNG, JPG, JPEG, GIF, WEBP (Max: 2MB)</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" onclick="handleFormSubmit(event)">
                        <i class="fas fa-upload me-2"></i>Upload
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editForm" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" id="editId" name="id">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Emoji/GIF</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editName" class="form-label">Name</label>
                        <input type="text" class="form-control" id="editName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="editIsActive" name="is_active" value="1">
                            <label class="form-check-label" for="editIsActive">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Refresh emoji table function
function refreshEmojiTable() {
    console.log('Refreshing emoji table...');
    
    fetch('/super-admin/custom-emoji-management', {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newTable = doc.querySelector('.table-responsive');
        
        if (newTable) {
            const currentTable = document.querySelector('.table-responsive');
            if (currentTable) {
                currentTable.innerHTML = newTable.innerHTML;
                console.log('Emoji table refreshed successfully');
            }
        }
    })
    .catch(error => {
        console.error('Error refreshing table:', error);
        location.reload();
    });
}

// Toast notification function
function showToast(type, title, message) {
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <strong>${title}</strong><br>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    `;
    
    let toastContainer = document.getElementById('toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.id = 'toast-container';
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        toastContainer.style.zIndex = '9999';
        document.body.appendChild(toastContainer);
    }
    
    toastContainer.insertAdjacentHTML('beforeend', toastHtml);
    
    const toastElement = toastContainer.lastElementChild;
    const toast = new bootstrap.Toast(toastElement);
    toast.show();
    
    toastElement.addEventListener('hidden.bs.toast', function() {
        toastElement.remove();
    });
}

// Handle form submission
function handleFormSubmit(event) {
    event.preventDefault();
    event.stopPropagation();
    
    console.log('=== FORM SUBMISSION START ===');
    
    const form = document.getElementById('uploadForm');
    if (!form) {
        console.error('Form not found!');
        return;
    }
    
    const formData = new FormData(form);
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Uploading...';
    submitBtn.disabled = true;
    
    fetch('/super-admin/custom-emojis', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        console.log('Response received:', response);
        return response.json();
    })
    .then(data => {
        console.log('Data received:', data);
        if (data.success) {
            showToast('success', 'Success!', data.message);
            const modal = bootstrap.Modal.getInstance(document.getElementById('uploadModal'));
            if (modal) {
                modal.hide();
            }
            form.reset();
            refreshEmojiTable();
        } else {
            showToast('error', 'Error!', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('error', 'Error!', 'Something went wrong');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}

// Toggle fields based on type selection
function toggleFields() {
    const type = document.getElementById('type').value;
    const emojiField = document.getElementById('emojiField');
    const fileField = document.getElementById('fileField');
    
    emojiField.style.display = 'block';
    fileField.style.display = 'block';
    
    if (type === 'emoji') {
        fileField.style.display = 'none';
        document.getElementById('emoji_text').required = true;
        document.getElementById('file').required = false;
    } else if (type === 'gif') {
        emojiField.style.display = 'none';
        document.getElementById('file').required = true;
        document.getElementById('emoji_text').required = false;
    } else {
        document.getElementById('emoji_text').required = false;
        document.getElementById('file').required = false;
    }
}

// Form submission event listener
document.addEventListener('submit', function(e) {
    console.log('=== SUBMIT EVENT DETECTED ===');
    console.log('Target ID:', e.target.id);
    
    if (e.target.id === 'uploadForm') {
        e.preventDefault();
        e.stopPropagation();
        
        console.log('=== UPLOAD FORM SUBMISSION START ===');
        
        const formData = new FormData(e.target);
        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Uploading...';
        submitBtn.disabled = true;
        
        fetch('/super-admin/custom-emojis', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            console.log('Response received:', response);
            return response.json();
        })
        .then(data => {
            console.log('Data received:', data);
            if (data.success) {
                showToast('success', 'Success!', data.message);
                const modal = bootstrap.Modal.getInstance(document.getElementById('uploadModal'));
                if (modal) {
                    modal.hide();
                }
                e.target.reset();
                refreshEmojiTable();
            } else {
                showToast('error', 'Error!', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('error', 'Error!', 'Something went wrong');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    }
});

// Edit form submission
document.getElementById('editForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const emojiId = document.getElementById('editId').value;
    
    console.log('=== EDIT FORM SUBMISSION ===');
    console.log('Emoji ID from hidden field:', emojiId);
    console.log('Emoji ID type:', typeof emojiId);
    
    // Validate that emojiId is numeric
    if (!emojiId || isNaN(emojiId)) {
        console.error('Invalid emoji ID:', emojiId);
        showToast('error', 'Error!', 'Invalid emoji ID');
        return;
    }
    
    const formData = new FormData(this);
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
    submitBtn.disabled = true;
    
    const url = `/super-admin/custom-emojis/${emojiId}`;
    console.log('Update URL:', url);
    
    fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'X-HTTP-Method-Override': 'PUT'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', 'Success!', data.message);
            const editModal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
            if (editModal) {
                editModal.hide();
            }
            refreshEmojiTable();
        } else {
            showToast('error', 'Error!', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('error', 'Error!', 'Something went wrong');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
});

// Edit emoji function - ENSURE ID IS STRING
function editEmoji(id) {
    // Convert to string to ensure proper handling
    const emojiId = String(id);
    
    console.log('=== EDIT EMOJI DEBUG ===');
    console.log('Original ID:', id);
    console.log('String ID:', emojiId);
    console.log('ID Type:', typeof emojiId);
    
    const url = `/super-admin/custom-emojis/${emojiId}`;
    console.log('Fetching URL:', url);
    
    fetch(url, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            document.getElementById('editId').value = data.emoji.id;
            document.getElementById('editName').value = data.emoji.name;
            document.getElementById('editIsActive').checked = data.emoji.is_active;
            
            const editModal = new bootstrap.Modal(document.getElementById('editModal'));
            editModal.show();
            console.log('Modal opened successfully');
        } else {
            showToast('error', 'Error!', data.message);
        }
    })
    .catch(error => {
        console.error('Error details:', error);
        showToast('error', 'Error!', `Failed to load emoji data: ${error.message}`);
    });
}

// Toggle status function - ENSURE ID IS STRING
function toggleStatus(id) {
    // Convert to string to ensure proper handling
    const emojiId = String(id);
    
    console.log('=== TOGGLE STATUS DEBUG ===');
    console.log('Original ID:', id);
    console.log('String ID:', emojiId);
    
    if (confirm('Are you sure you want to change the status?')) {
        const url = `/super-admin/custom-emojis/${emojiId}/toggle`;
        console.log('Toggle URL:', url);
        
        fetch(url, {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('success', 'Success!', data.message);
                refreshEmojiTable();
            } else {
                showToast('error', 'Error!', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('error', 'Error!', 'Something went wrong');
        });
    }
}

// Delete emoji function - ENSURE ID IS STRING
function deleteEmoji(id) {
    // Convert to string to ensure proper handling
    const emojiId = String(id);
    
    console.log('=== DELETE EMOJI DEBUG ===');
    console.log('Original ID:', id);
    console.log('String ID:', emojiId);
    console.log('ID Type:', typeof emojiId);
    
    if (confirm('Are you sure you want to delete this emoji/GIF? This action cannot be undone.')) {
        const url = `/super-admin/custom-emojis/${emojiId}`;
        console.log('Delete URL:', url);
        
        fetch(url, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => {
            console.log('Delete response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Delete response data:', data);
            if (data.success) {
                showToast('success', 'Success!', data.message);
                refreshEmojiTable();
            } else {
                showToast('error', 'Error!', data.message);
            }
        })
        .catch(error => {
            console.error('Delete error:', error);
            showToast('error', 'Error!', 'Something went wrong');
        });
    }
}

// Reset form when modal is closed
document.getElementById('uploadModal').addEventListener('hidden.bs.modal', function () {
    document.getElementById('uploadForm').reset();
    document.getElementById('emojiField').style.display = 'block';
    document.getElementById('fileField').style.display = 'block';
});
</script>
@endsection