@extends('template.basic.layouts.master')

@section('content')
<div x-data="customerSupport()" class="flex-grow">
    <div class="container mx-auto w-full lg:w-5/6 px-4 py-6">
        <!-- Header -->
        
        <div class="flex items-center justify-between mb-6">
                <div class="flex-1">
                    <h3 class="text-lg">
                        <a href="{{ route('user.settings.index') }}"
                            class="inline-flex items-center  text-white hover:text-white">
                            <i class="bi bi-arrow-left mr-2"></i> Back
                        </a>
                    </h3>
                </div>
                <div class="flex-1 text-center text-xl font-normal text-white">Customer Service</div>
                <div class="flex-1"></div>
            </div>

        <!-- Image -->
        <div class="text-center mb-6">
            <img src="{{ secure_url('/') }}/assets/img/customer_service.png" class="mx-auto w-full max-w-xs" alt="Customer Service">
        </div>

        <!-- Greeting / Description -->
        <div class="text-center mb-6">
            <h2 class="text-xl font-semibold text-white mb-1">Hello</h2>
            <p class="text-white mb-2 text-base">How can we be of help to you?</p>
            <p class="text-white text-sm">
                We are determined to give you the best support experience. If you have any questions or challenges, we are available to help.
            </p>
        </div>

        <!-- Toast -->
        <div 
            x-show="toast.show" 
            x-text="toast.message"
            :class="toast.success ? 'bg-green-600' : 'bg-red-600'"
            class="fixed top-4 right-4 px-4 py-2 rounded-lg text-white shadow-lg z-50 transition"
            x-transition.opacity.duration.500ms
        ></div>

        <!-- Live Chat Card -->
        <div 
            @click="openLiveChat()" 
            class="cursor-pointer bg-white rounded-xl shadow p-4 mb-4 flex items-center space-x-4 hover:bg-gray-100 transition"
        >
            <div class="text-orange-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5"/>
                </svg>
            </div>
            <div>
                <h3 class="text-gray-800 font-semibold">Live Chat</h3>
                <p class="text-gray-500 text-sm">Need urgent help? Chat with customer support.</p>
            </div>
        </div>

        <!-- Email Card -->
        <div 
            @click="sendEmail()" 
            class="cursor-pointer bg-white rounded-xl shadow p-4 flex items-center space-x-4 hover:bg-gray-100 transition"
        >
            <div class="text-yellow-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"/>
                    <path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648m-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/>
                </svg>
            </div>
            <div>
                <h3 class="text-gray-800 font-semibold">Email</h3>
                <p class="text-gray-500 text-sm">
                    Send us a <span class="text-yellow-500 underline">{{ system_settings('site_email') }}</span>
                </p>
            </div>
        </div>
    </div>

    <!-- Alpine.js Script -->
    <script>
        function customerSupport() {
            return {
                toast: { show: false, message: '', success: true },
                
                showToast(message, success=true) {
                    this.toast.message = message;
                    this.toast.success = success;
                    this.toast.show = true;
                    setTimeout(() => this.toast.show = false, 3000);
                },

                openLiveChat() {
                    this.showToast('Opening live chat...', true);
                    // You can add real chat logic here
                    // window.open('/live-chat','_blank');
                },

                sendEmail() {
                    this.showToast('Opening email client...', true);
                    window.location.href = 'mailto:{{ system_settings("site_email") }}';
                }
            }
        }
    </script>
</div>

@endsection