@extends('layouts.app')
@section('title', 'Create Support Request')

@section('content')
<div class="mx-auto max-w-(--breakpoint-md) p-4 pb-20 md:p-6 md:pb-6">
    
    <!-- Breadcrumb Start -->
    <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">Create Support Request</h2>
        <nav>
            <ol class="flex items-center gap-1.5">
                <li><a class="text-sm text-gray-500" href="#">Home</a></li>
                <li class="text-sm text-gray-800 dark:text-white/90">/ Support</li>
            </ol>
        </nav>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
    <div class="mb-6 rounded-lg bg-green-50 p-4 border border-green-200 dark:bg-green-500/10 dark:border-green-500/20">
        <div class="flex">
            <div class="shrink-0">
                <svg class="h-5 w-5 text-green-600" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-bold text-green-800 dark:text-green-400">Support request submitted successfully.</h3>
                <div class="mt-2 text-sm text-green-700 dark:text-green-300">
                    Thank you for contacting Undersign. Your request has been received, and our support team will review it shortly. We aim to respond within <b>3 business days</b>. A confirmation has been sent to your email address if provided.
                </div>
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="mb-6 rounded-lg bg-red-50 p-4 border border-red-200 dark:bg-red-500/10 dark:border-red-500/20">
        <div class="flex">
            <div class="shrink-0">
                <svg class="h-5 w-5 text-red-600" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-bold text-red-800 dark:text-red-400">Unable to submit your request.</h3>
                <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                    We couldn't submit your support request at this time. Please try again in a few minutes. If the problem persists, email us directly at <b>hello@undersign.app</b>.
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="mb-8">
            <p class="text-gray-600 dark:text-gray-400 mb-4">
                Need assistance? If you're experiencing an issue, have a question about a feature, or need clarification, please complete the form below. Our support team will review your request and respond as soon as possible.
            </p>
            <p class="text-gray-800 dark:text-white font-medium">
                We aim to respond to all support requests within <span class="font-bold">3 business days</span>.
            </p>
            
            <div class="mt-4 flex items-center gap-3 rounded-lg bg-brand-50 p-3 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                <span class="text-sm">Prefer email? Send us a message at <a href="mailto:hello@undersign.app" class="font-bold underline">hello@undersign.app</a></span>
            </div>
        </div>

        <form action="{{ route('support.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="space-y-6">
                <!-- Full Name -->
                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <!-- Full Name -->
                    <div>
                        <label class="mb-2.5 block font-medium text-gray-800 dark:text-white/90">Full Name <span class="text-red-500">*</span></label>
                        <input type="text" name="full_name" required placeholder="Enter your full name" 
                            class="w-full rounded-lg border border-gray-300 bg-transparent px-5 py-3 text-sm outline-none focus:border-brand-500 dark:border-gray-700 dark:bg-gray-900" />
                    </div>

                    <!-- Email Address -->
                    <div>
                        <label class="mb-2.5 block font-medium text-gray-800 dark:text-white/90">Email Address <span class="text-red-500">*</span></label>
                        <input type="email" name="email" required placeholder="Enter your email address" 
                            class="w-full rounded-lg border border-gray-300 bg-transparent px-5 py-3 text-sm outline-none focus:border-brand-500 dark:border-gray-700 dark:bg-gray-900" />
                        <p class="mt-1 text-xs text-gray-500">We'll use this email to respond to your request.</p>
                    </div>
                </div>

                <!-- Request Summary -->
                <div>
                    <label class="mb-2.5 block font-medium text-gray-800 dark:text-white/90">Request Summary <span class="text-red-500">*</span></label>
                    <input type="text" name="summary" required placeholder="Provide a brief summary of your issue or question" 
                        class="w-full rounded-lg border border-gray-300 bg-transparent px-5 py-3 text-sm outline-none focus:border-brand-500 dark:border-gray-700 dark:bg-gray-900" />
                </div>

                <!-- Request Details -->
                <div>
                    <label class="mb-2.5 block font-medium text-gray-800 dark:text-white/90">Request Details <span class="text-red-500">*</span></label>
                    <textarea name="details" rows="5" required
                        placeholder="Please provide as much detail as possible about your issue or question. Include steps to reproduce the issue, any error messages, and what you were trying to accomplish."
                        class="w-full rounded-lg border border-gray-300 bg-transparent px-5 py-3 text-sm outline-none focus:border-brand-500 dark:border-gray-700 dark:bg-gray-900"></textarea>
                    <p class="mt-1 text-xs text-gray-500">The more details you provide, the faster we can help.</p>
                </div>

                <!-- Screenshot Upload -->
                <div x-data="{ files: [] }">
                    <label class="mb-2.5 block font-medium text-gray-800 dark:text-white/90">Screenshot (optional)</label>
                    <p class="mb-3 text-xs text-gray-500">Attach files or screenshots to help us understand the issue better.</p>
                    
                    <div class="relative mb-4 flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 py-8 px-4 dark:border-gray-700 dark:bg-gray-900/50">
                        <input type="file" name="screenshots[]" multiple accept=".doc,.docx,.pdf,.jpg,.png" 
                            @change="files = Array.from($event.target.files)"
                            class="absolute inset-0 z-50 h-full w-full cursor-pointer opacity-0" />
                        
                        <div class="flex flex-col items-center justify-center text-center">
                            <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-500 text-white">
                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                            </div>
                            <p class="text-sm font-bold text-gray-800 dark:text-white">Drag and drop files here or click to browse</p>
                            <p class="mt-1 text-xs text-gray-500">You can upload up to 3 files (DOC, JPG, PNG, PDF) up to 10MB each.</p>
                        </div>
                    </div>

                    <!-- File List Display -->
                    <div class="mb-4 rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900">
                        <div class="flex items-center justify-between">
                            <span class="text-xs font-medium text-gray-500" x-text="files.length > 0 ? files.map(f => f.name).join(', ') : 'No files uploaded'"></span>
                            <span class="text-xs text-gray-400" x-text="files.length + ' of 3 files'"></span>
                        </div>
                    </div>

                    <!-- Supported Formats Info -->
                    <div class="flex flex-wrap items-center gap-y-2 rounded-lg bg-blue-50 p-3 text-xs text-blue-700 dark:bg-blue-500/10 dark:text-blue-400">
                        <div class="flex items-center border-r border-blue-200 pr-4 dark:border-blue-800">
                            <svg class="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /></svg>
                            Supported formats: DOC, DOCX, PDF, JPG, PNG
                        </div>
                        <div class="px-4 border-r border-blue-200 dark:border-blue-800">Maximum file size: 10MB per file</div>
                        <div class="pl-4">Maximum files: 3</div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="pt-4">
                    <button type="submit" class="inline-flex items-center justify-center gap-2.5 rounded-lg bg-brand-500 px-10 py-3.5 text-center font-medium text-white hover:bg-opacity-90 p-2">
                        <!-- <svg class="h-5 w-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"></path></svg> -->
                        Submit Support Request
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection