@extends('layouts.app')

@section('title', 'Support')

@push('stylesheets')
<style>
    .support-dropzone {
        border: 2px dashed #ced4da;
        border-radius: 0.25rem;
        padding: 1.5rem 1rem;
        text-align: center;
        background-color: #f8f9fa;
        transition: border-color 0.15s ease, background-color 0.15s ease;
        cursor: pointer;
    }
    .support-dropzone.is-dragover {
        border-color: #17a2b8;
        background-color: #e7f5f8;
    }
    .support-dropzone:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
    }
    .dark-mode .support-dropzone {
        border-color: #6c757d;
        background-color: #3d444b;
        color: #dee2e6;
    }
    .dark-mode .support-dropzone.is-dragover {
        border-color: #5bc0de;
        background-color: #2c3e50;
    }
    .support-preview-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1rem;
    }
    .support-preview-item {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 0.25rem;
        overflow: hidden;
        border: 1px solid #dee2e6;
        background: #fff;
    }
    .dark-mode .support-preview-item {
        border-color: #6c757d;
        background: #454d55;
    }
    .support-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .support-preview-item .support-preview-remove {
        position: absolute;
        top: 2px;
        right: 2px;
        padding: 0.1rem 0.35rem;
        line-height: 1;
    }
    .support-preview-name {
        font-size: 0.7rem;
        padding: 0.15rem 0.25rem;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-life-ring mr-2"></i>Help &amp; support</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-2">
                            Describe your issue or question below. You may attach screenshots (images only). Our team will review your submission.
                        </p>
                        <p class="mb-4">
                            <a href="{{ route('support.tickets.index') }}"><i class="far fa-list-alt mr-1"></i>View my support tickets</a>
                        </p>
                        <form id="support-form" action="{{ route('support.store') }}" method="post" enctype="multipart/form-data" novalidate>
                            @csrf
                            <x-form.textarea
                                label="Your message"
                                name="message"
                                id="support_message"
                                :value="old('message')"
                                :required="true"
                                placeholder="Please describe what you need help with…"
                            />

                            <div class="form-group">
                                <label class="d-block">Attachments <span class="text-muted font-weight-normal">(optional)</span></label>
                                <div
                                    id="support-dropzone"
                                    class="support-dropzone"
                                    tabindex="0"
                                    role="button"
                                    aria-label="Drop images here or click to browse"
                                >
                                    <i class="fas fa-cloud-upload-alt fa-2x mb-2 text-info" aria-hidden="true"></i>
                                    <div class="font-weight-bold mb-1">Drag &amp; drop images here</div>
                                    <div class="small text-muted">or click to browse — PNG, JPG, GIF, WebP — up to 15 images, 10 MB each</div>
                                </div>
                                <input type="file" id="support-file-trigger" class="d-none" accept="image/*" multiple aria-hidden="true">
                                <div id="support-preview-grid" class="support-preview-grid"></div>
                                <span class="invalid-feedback d-none d-block" id="support-client-error" role="alert"></span>
                            </div>

                            <div class="d-flex flex-wrap align-items-center justify-content-between pt-3 border-top mt-2">
                                <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('dashboard') }}" class="btn btn-outline-secondary">Cancel</a>
                                <button type="submit" class="btn btn-primary" id="support-submit-btn">
                                    <i class="fas fa-paper-plane mr-1"></i>Submit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    var form = document.getElementById('support-form');
    var dropzone = document.getElementById('support-dropzone');
    var fileTrigger = document.getElementById('support-file-trigger');
    var previewGrid = document.getElementById('support-preview-grid');
    var clientError = document.getElementById('support-client-error');
    var submitBtn = document.getElementById('support-submit-btn');
    var textarea = document.getElementById('support_message');
    var files = [];
    var maxFiles = 15;
    var maxBytes = 10 * 1024 * 1024;

    function isImageFile(file) {
        return file && file.type && file.type.indexOf('image/') === 0;
    }

    function showClientError(msg) {
        if (!clientError) return;
        clientError.textContent = msg || '';
        clientError.classList.toggle('d-none', !msg);
    }

    function revokeUrls() {
        files.forEach(function (entry) {
            if (entry.url) URL.revokeObjectURL(entry.url);
        });
    }

    function renderPreviews() {
        if (!previewGrid) return;
        previewGrid.innerHTML = '';
        files.forEach(function (entry, index) {
            var wrap = document.createElement('div');
            wrap.className = 'support-preview-item';
            var img = document.createElement('img');
            img.src = entry.url;
            img.alt = entry.file.name;
            var nameEl = document.createElement('div');
            nameEl.className = 'support-preview-name';
            nameEl.textContent = entry.file.name;
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-sm btn-danger support-preview-remove';
            btn.setAttribute('aria-label', 'Remove ' + entry.file.name);
            btn.innerHTML = '<i class="fas fa-times"></i>';
            btn.addEventListener('click', function () {
                URL.revokeObjectURL(entry.url);
                files.splice(index, 1);
                renderPreviews();
            });
            wrap.appendChild(img);
            wrap.appendChild(nameEl);
            wrap.appendChild(btn);
            previewGrid.appendChild(wrap);
        });
    }

    function addFileList(fileList) {
        showClientError('');
        var incoming = Array.prototype.slice.call(fileList || []);
        for (var i = 0; i < incoming.length; i++) {
            var f = incoming[i];
            if (!isImageFile(f)) {
                showClientError('Only image files are allowed.');
                return;
            }
            if (f.size > maxBytes) {
                showClientError('Each image must be 10 MB or smaller.');
                return;
            }
        }
        for (var j = 0; j < incoming.length; j++) {
            if (files.length >= maxFiles) {
                showClientError('You can attach at most ' + maxFiles + ' images.');
                return;
            }
            var file = incoming[j];
            if (!isImageFile(file)) continue;
            files.push({ file: file, url: URL.createObjectURL(file) });
        }
        renderPreviews();
    }

    if (dropzone && fileTrigger) {
        dropzone.addEventListener('click', function () { fileTrigger.click(); });
        dropzone.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                fileTrigger.click();
            }
        });
        ['dragenter', 'dragover'].forEach(function (ev) {
            dropzone.addEventListener(ev, function (e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.classList.add('is-dragover');
            });
        });
        ['dragleave', 'drop'].forEach(function (ev) {
            dropzone.addEventListener(ev, function (e) {
                e.preventDefault();
                e.stopPropagation();
                if (ev !== 'drop') dropzone.classList.remove('is-dragover');
            });
        });
        dropzone.addEventListener('drop', function (e) {
            dropzone.classList.remove('is-dragover');
            if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
                addFileList(e.dataTransfer.files);
            }
        });
        fileTrigger.addEventListener('change', function () {
            if (fileTrigger.files && fileTrigger.files.length) {
                addFileList(fileTrigger.files);
            }
            fileTrigger.value = '';
        });
    }

    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            showClientError('');
            var msg = textarea ? String(textarea.value || '').trim() : '';
            if (!msg) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ icon: 'warning', title: 'Required', text: 'Please enter your message before submitting.' });
                }
                return;
            }

            var fd = new FormData();
            fd.append('_token', form.querySelector('input[name=\"_token\"]').value);
            fd.append('message', msg);
            files.forEach(function (entry) {
                fd.append('attachments[]', entry.file);
            });

            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.dataset.html = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-1\"></i>Sending…';
            }

            var csrf = document.querySelector('meta[name=\"csrf-token\"]');
            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf ? csrf.getAttribute('content') : ''
                },
                body: fd
            })
                .then(function (res) { return res.json().then(function (data) { return { res: res, data: data }; }); })
                .then(function (pair) {
                    if (pair.res.ok && pair.data && pair.data.success) {
                        if (textarea) textarea.value = '';
                        revokeUrls();
                        files = [];
                        renderPreviews();
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Thank you',
                                text: pair.data.message || 'We have received your submission.',
                                confirmButtonText: 'OK'
                            });
                        }
                    } else {
                        var errText = 'Something went wrong. Please try again.';
                        if (pair.data && pair.data.message) errText = pair.data.message;
                        if (pair.data && pair.data.errors) {
                            var first = pair.data.errors;
                            var keys = Object.keys(first);
                            if (keys.length && first[keys[0]] && first[keys[0]][0]) {
                                errText = first[keys[0]][0];
                            }
                        }
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({ icon: 'error', title: 'Could not submit', text: errText });
                        }
                    }
                })
                .catch(function () {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({ icon: 'error', title: 'Network error', text: 'Please check your connection and try again.' });
                    }
                })
                .finally(function () {
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        if (submitBtn.dataset.html) submitBtn.innerHTML = submitBtn.dataset.html;
                    }
                });
        });
    }
})();
</script>
@endpush