@extends('layouts.app-sidebar')

@section('content')
<div class="space-y-6">

    <!-- Header -->
    <div class="flex items-center gap-4">
        <a href="{{ route('dashboard.tickets.index') }}" class="text-db-text-muted hover:text-db-text-primary transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
        </a>
        <div>
            <h1 class="text-2xl lg:text-3xl font-bold text-db-text-primary">Submit Ticket</h1>
            <p class="text-db-text-secondary mt-1">Report a bug or share a suggestion</p>
        </div>
    </div>

    @if($errors->any())
    <div class="p-4 bg-red-500/15 border border-red-500/25 rounded-xl text-red-400">
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Form -->
    <div class="bg-db-card border border-db-border rounded-xl p-6">
        <form action="{{ route('dashboard.tickets.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6" id="ticketForm">
            @csrf

            <!-- Type -->
            <div>
                <label class="block text-sm font-medium text-db-text-secondary mb-3">Type</label>
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
                    <label class="relative cursor-pointer">
                        <input type="radio" name="type" value="bug" class="peer sr-only" {{ old('type') === 'bug' ? 'checked' : '' }} required>
                        <div class="flex flex-col items-center gap-2 p-4 rounded-xl border border-db-border bg-db-surface peer-checked:border-red-500 peer-checked:bg-red-500/10 transition-all">
                            <svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                            <span class="text-sm font-medium text-db-text-primary">Bug Report</span>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" name="type" value="suggestion" class="peer sr-only" {{ old('type') === 'suggestion' ? 'checked' : '' }}>
                        <div class="flex flex-col items-center gap-2 p-4 rounded-xl border border-db-border bg-db-surface peer-checked:border-blue-500 peer-checked:bg-blue-500/10 transition-all">
                            <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            </svg>
                            <span class="text-sm font-medium text-db-text-primary">Suggestion</span>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" name="type" value="question" class="peer sr-only" {{ old('type') === 'question' ? 'checked' : '' }}>
                        <div class="flex flex-col items-center gap-2 p-4 rounded-xl border border-db-border bg-db-surface peer-checked:border-purple-500 peer-checked:bg-purple-500/10 transition-all">
                            <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span class="text-sm font-medium text-db-text-primary">Question</span>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" name="type" value="other" class="peer sr-only" {{ old('type') === 'other' ? 'checked' : '' }}>
                        <div class="flex flex-col items-center gap-2 p-4 rounded-xl border border-db-border bg-db-surface peer-checked:border-zinc-500 peer-checked:bg-zinc-500/10 transition-all">
                            <svg class="w-6 h-6 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                            </svg>
                            <span class="text-sm font-medium text-db-text-primary">Other</span>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Related Channel -->
            @if($tenants->count() > 0)
            <div>
                <label class="block text-sm font-medium text-db-text-secondary mb-2">Related Channel (Optional)</label>
                <select name="tenant_id" class="w-full px-4 py-2.5 rounded-lg bg-db-surface border border-db-border text-db-text-primary focus:border-db-accent-primary focus:ring-1 focus:ring-db-accent-primary transition-colors">
                    <option value="">-- Select Channel --</option>
                    @foreach($tenants as $tenant)
                    <option value="{{ $tenant->id }}" {{ old('tenant_id') == $tenant->id ? 'selected' : '' }}>{{ $tenant->channel_title }}</option>
                    @endforeach
                </select>
            </div>
            @endif

            <!-- Subject -->
            <div>
                <label class="block text-sm font-medium text-db-text-secondary mb-2">Subject</label>
                <input type="text" name="subject" value="{{ old('subject') }}" required maxlength="200"
                       class="w-full px-4 py-2.5 rounded-lg bg-db-surface border border-db-border text-db-text-primary focus:border-db-accent-primary focus:ring-1 focus:ring-db-accent-primary transition-colors"
                       placeholder="Brief summary of your issue or suggestion">
            </div>

            <!-- Description -->
            <div>
                <label class="block text-sm font-medium text-db-text-secondary mb-2">Description</label>
                <textarea name="description" rows="6" required maxlength="5000"
                          class="w-full px-4 py-2.5 rounded-lg bg-db-surface border border-db-border text-db-text-primary focus:border-db-accent-primary focus:ring-1 focus:ring-db-accent-primary transition-colors resize-none"
                          placeholder="Please provide as much detail as possible...">{{ old('description') }}</textarea>
                <p class="text-xs text-db-text-muted mt-2">For bugs: Include steps to reproduce, expected behavior, and what actually happened.</p>
            </div>

            <!-- Attachment -->
            <div>
                <label class="block text-sm font-medium text-db-text-secondary mb-2">Screenshot (Optional)</label>
                <div class="relative">
                    <input type="file" name="attachment" id="attachment" accept=".png,.jpg,.jpeg"
                           class="hidden" onchange="updateFileName(this)">
                    <label for="attachment" class="flex items-center gap-3 px-4 py-3 rounded-lg bg-db-surface border border-db-border border-dashed cursor-pointer hover:border-db-accent-primary transition-colors">
                        <svg class="w-6 h-6 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <span id="fileName" class="text-db-text-muted">Click to upload PNG or JPG (max 5MB)</span>
                    </label>
                </div>
                <div id="imagePreview" class="mt-3 hidden">
                    <img id="previewImg" src="" alt="Preview" class="max-w-xs rounded-lg border border-db-border">
                    <button type="button" onclick="clearFile()" class="mt-2 text-sm text-red-400 hover:text-red-300">Remove</button>
                </div>
            </div>

            <!-- reCAPTCHA hidden input -->
            <input type="hidden" name="g-recaptcha-response" id="recaptchaResponse">

            <!-- Submit -->
            <div class="flex items-center gap-4">
                <button type="submit" id="submitBtn" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-db-accent-primary text-white font-medium hover:bg-db-accent-primary/90 transition-colors shadow-lg shadow-db-accent-primary/25">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                    Submit Ticket
                </button>
                <a href="{{ route('dashboard.tickets.index') }}" class="text-db-text-muted hover:text-db-text-primary transition-colors">
                    Cancel
                </a>
            </div>

            @if(config('services.recaptcha.site_key'))
            <p class="text-xs text-db-text-muted">
                This site is protected by reCAPTCHA and the Google
                <a href="https://policies.google.com/privacy" target="_blank" class="text-db-accent-primary hover:underline">Privacy Policy</a> and
                <a href="https://policies.google.com/terms" target="_blank" class="text-db-accent-primary hover:underline">Terms of Service</a> apply.
            </p>
            @endif
        </form>
    </div>

</div>

@if(config('services.recaptcha.site_key'))
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
<script>
    document.getElementById('ticketForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const form = this;
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Verifying...';

        grecaptcha.ready(function() {
            grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', {action: 'submit_ticket'}).then(function(token) {
                document.getElementById('recaptchaResponse').value = token;
                form.submit();
            });
        });
    });
</script>
@endif

<script>
    function updateFileName(input) {
        const fileName = document.getElementById('fileName');
        const preview = document.getElementById('imagePreview');
        const previewImg = document.getElementById('previewImg');

        if (input.files && input.files[0]) {
            const file = input.files[0];

            // Check file size (5MB)
            if (file.size > 5 * 1024 * 1024) {
                alert('File is too large. Maximum size is 5MB.');
                input.value = '';
                return;
            }

            fileName.textContent = file.name;
            fileName.classList.remove('text-db-text-muted');
            fileName.classList.add('text-db-text-primary');

            // Show preview
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
                preview.classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        }
    }

    function clearFile() {
        const input = document.getElementById('attachment');
        const fileName = document.getElementById('fileName');
        const preview = document.getElementById('imagePreview');

        input.value = '';
        fileName.textContent = 'Click to upload PNG or JPG (max 5MB)';
        fileName.classList.add('text-db-text-muted');
        fileName.classList.remove('text-db-text-primary');
        preview.classList.add('hidden');
    }
</script>
@endsection