@extends('layouts.dasht')
@section('title', $title)
@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6" x-data="{ 
    showSuccess: false, 
    showError: false,
    isSubmitting: false,
    message: '',
    showContactModal: false 
}">
    <div class="max-w-4xl mx-auto">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center space-x-4 mb-6">
                <div class="w-16 h-16 rounded-3xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 flex items-center justify-center backdrop-blur-sm">
                    <i data-lucide="headphones" class="w-8 h-8 text-blue-600 dark:text-blue-400"></i>
                </div>
                <div>
                    <h1 class="text-4xl font-light text-gray-800 dark:text-white mb-2">
                        Support Center
                    </h1>
                    <p class="text-gray-500 dark:text-gray-400 font-light text-lg">
                        We're here to help you with any questions or concerns
                    </p>
                </div>
            </div>
        </div>

        <!-- Alert Components -->
        <div x-show="showSuccess" x-transition class="mb-6">
            <x-success-alert/>
        </div>
        <div x-show="showError" x-transition class="mb-6">
            <x-danger-alert/>
        </div>

        <!-- Support Options Grid -->
        <div class="grid md:grid-cols-1 gap-6 mb-8">
            <!-- Email Support Card -->
            <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
                <div class="flex items-center space-x-4 mb-4">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/10 to-blue-600/10 flex items-center justify-center">
                        <i data-lucide="mail" class="w-6 h-6 text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Email Support</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Get help via email</p>
                    </div>
                </div>
                <p class="text-gray-600 dark:text-gray-300 mb-4 text-sm">Direct email communication for detailed inquiries and support requests.</p>
                <a href="mailto:{{$settings->contact_email}}" 
                   class="inline-flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors">
                    <span>{{$settings->contact_email}}</span>
                    <i data-lucide="external-link" class="w-4 h-4"></i>
                </a>
            </div>

           

         

        <!-- Contact Form Section -->
        <div class="bg-white dark:bg-gray-900 rounded-3xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-light text-gray-800 dark:text-white mb-4">Send us a Message</h2>
                <p class="text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
                    Have a specific question or need assistance? Fill out the form below and our support team will get back to you as soon as possible.
                </p>
            </div>

            <div class="max-w-2xl mx-auto">
                <form method="post" action="{{route('enquiry')}}" 
                      @submit="isSubmitting = true" 
                      x-data="{ messageLength: 0 }">
                    @csrf
                    <input type="hidden" name="name" value="{{Auth::user()->name}}" />
                    <input type="hidden" name="email" value="{{Auth::user()->email}}">

                    <!-- User Info Display -->
                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Your Name</label>
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
                                    <span class="text-white font-semibold text-sm">{{substr(Auth::user()->name, 0, 1)}}</span>
                                </div>
                                <span class="text-gray-800 dark:text-white font-medium">{{Auth::user()->name}}</span>
                            </div>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Your Email</label>
                            <div class="flex items-center space-x-3">
                                <i data-lucide="mail" class="w-5 h-5 text-gray-500"></i>
                                <span class="text-gray-800 dark:text-white">{{Auth::user()->email}}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Message Field -->
                    <div class="mb-6">
                        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                            Message <span class="text-red-500">*</span>
                        </label>
                        <textarea 
                            name="message" 
                            id="message"
                            x-model="message"
                            @input="messageLength = $el.value.length"
                            class="w-full px-4 py-4 bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-xl text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 resize-none" 
                            rows="6" 
                            placeholder="Please describe your issue or question in detail..."
                            required
                            maxlength="1000"></textarea>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                Please provide as much detail as possible to help us assist you better.
                            </p>
                            <span class="text-sm text-gray-400" x-text="messageLength + '/1000'"></span>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="text-center">
                        <button 
                            type="submit" 
                            :disabled="isSubmitting || message.trim().length < 10"
                            :class="isSubmitting ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105'"
                            class="inline-flex items-center space-x-3 px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform disabled:opacity-50 disabled:cursor-not-allowed">
                            <span x-show="!isSubmitting">Send Message</span>
                            <span x-show="isSubmitting" class="flex items-center space-x-2">
                                <svg class="animate-spin h-4 w-4" 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>
                                <span>Sending...</span>
                            </span>
                            <i data-lucide="send" class="w-5 h-5" x-show="!isSubmitting"></i>
                        </button>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">
                            We typically respond within 24 hours during business days.
                        </p>
                    </div>
                </form>
            </div>
        </div>

        <!-- Contact Modal -->
        <div x-show="showContactModal" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
             @click.self="showContactModal = false">
            <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 max-w-md w-full border border-gray-200 dark:border-gray-700"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100">
                <div class="text-center">
                    <div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="message-circle" class="w-8 h-8 text-green-600 dark:text-green-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Live Chat Support</h3>
                    <p class="text-gray-500 dark:text-gray-400 mb-6">
                        Our live chat feature is coming soon! For now, please use the contact form or email us directly.
                    </p>
                    <button @click="showContactModal = false" 
                            class="w-full px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Initialize Lucide icons
    lucide.createIcons();
</script>

@endsection