@extends('layouts.dashboard.inface', ['section' => 'whatsapp'])


@section('content')
    <div class="max-w-[960px] mx-auto overflow-auto">
        <!-- Breadcrumbs -->
        <nav class="flex items-center gap-2 text-sm mb-6 text-slate-500 dark:text-slate-400">
            <a class="hover:text-primary transition-colors" href="#">Configuración</a>
            <span class="material-symbols-outlined text-xs">chevron_right</span>
            <a class="hover:text-primary transition-colors" href="#">Integraciones</a>
            <span class="material-symbols-outlined text-xs">chevron_right</span>
            <span class="text-slate-900 dark:text-white font-medium">WhatsApp API</span>
        </nav>
        <!-- Page Title Area -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
            <div>
                <h2 class="text-3xl font-bold text-slate-900 dark:text-white">Configuración de WhatsApp API</h2>
                <p class="text-slate-500 dark:text-slate-400 mt-1">Habilita la comunicación automatizada con tus
                    clientes potenciales.</p>
            </div>
            <button
                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors shadow-sm">
                <span class="material-symbols-outlined text-lg">arrow_back</span>
                Regresar
            </button>
        </div>
        <!-- Configuration Card -->
        <div
            class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
            <!-- Card Top Header -->
            <div
                class="p-6 border-b border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-[#25D366]/10 rounded-xl flex items-center justify-center">
                        <svg fill="#25D366" height="28" viewbox="0 0 24 24" width="28"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M12.011 2.00003C6.48 2.00003 2 6.48103 2 12.011C2 13.908 2.527 15.682 3.442 17.201L2 22L6.905 20.627C8.384 21.504 10.134 22.021 12.011 22.021C17.542 22.021 22.021 17.541 22.021 12.011C22.021 6.48103 17.542 2.00003 12.011 2.00003ZM17.653 16.516C17.419 17.174 16.31 17.728 15.795 17.801C15.352 17.863 14.778 17.915 12.833 17.108C10.347 16.077 8.74 13.548 8.616 13.384C8.5 13.219 7.643 12.08 7.643 10.898C7.643 9.715 8.246 9.14 8.48 8.904C8.665 8.718 8.971 8.636 9.266 8.636C9.36 8.636 9.447 8.641 9.525 8.645C9.754 8.654 9.87 8.668 10.024 9.038C10.217 9.502 10.686 10.65 10.743 10.766C10.8 10.882 10.857 11.037 10.78 11.192C10.703 11.347 10.64 11.431 10.523 11.567C10.407 11.703 10.278 11.868 10.169 12.002C10.049 12.146 9.916 12.302 10.06 12.551C10.204 12.8 10.697 13.606 11.428 14.257C12.373 15.099 13.138 15.366 13.425 15.485C13.642 15.576 13.8 15.556 13.955 15.381C14.15 15.161 14.59 14.646 14.746 14.414C14.901 14.181 15.056 14.22 15.281 14.304C15.506 14.388 16.945 15.099 17.237 15.244C17.528 15.39 17.721 15.46 17.79 15.576C17.859 15.692 17.859 16.148 17.653 16.516Z">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white">Conectar WhatsApp Business
                            API</h3>
                        <p class="text-xs text-slate-500 dark:text-slate-400">API de nube administrada por Meta
                        </p>
                    </div>
                </div>
                <div
                    class="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-700">
                    <span class="w-2 h-2 rounded-full bg-slate-400"></span>
                    <span class="text-xs font-bold uppercase tracking-wider">Desconectado</span>
                </div>
            </div>
            <!-- Instructions -->
            <div class="p-6 bg-slate-50 dark:bg-slate-800/30 border-b border-slate-100 dark:border-slate-800">
                <div class="flex items-start gap-4">
                    <div class="mt-1 text-primary">
                        <span class="material-symbols-outlined">info</span>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm text-slate-600 dark:text-slate-300">
                            Para integrar WhatsApp, necesitas crear una aplicación en el panel de
                            <a class="text-primary font-medium hover:underline" href="#">Meta for
                                Developers</a>.
                            Asegúrate de tener habilitado el producto de WhatsApp en tu App de Meta.
                        </p>
                        <div class="mt-3 flex gap-4">
                            <button
                                class="text-sm text-primary font-semibold flex items-center gap-1 hover:gap-2 transition-all">
                                Ver documentación completa
                                <span class="material-symbols-outlined text-sm">open_in_new</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <livewire:admin.whatsapp.settings_whatsapp_form></livewire:admin.whatsapp.settings_whatsapp_form>
        </div>
        <!-- Help Sidebar / Bottom Tips -->
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                <span class="material-symbols-outlined text-primary mb-2">security</span>
                <h4 class="text-sm font-bold mb-1">Cifrado de Extremo a Extremo</h4>
                <p class="text-xs text-slate-500 dark:text-slate-400">Tus credenciales se almacenan bajo
                    cifrado AES-256 para máxima seguridad.</p>
            </div>
            <div class="p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                <span class="material-symbols-outlined text-primary mb-2">history</span>
                <h4 class="text-sm font-bold mb-1">Sincronización en Tiempo Real</h4>
                <p class="text-xs text-slate-500 dark:text-slate-400">Recibe y envía mensajes instantáneamente
                    desde tu CRM una vez conectado.</p>
            </div>
            <div class="p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                <span class="material-symbols-outlined text-primary mb-2">forum</span>
                <h4 class="text-sm font-bold mb-1">Soporte Prioritario</h4>
                <p class="text-xs text-slate-500 dark:text-slate-400">¿Tienes problemas con la configuración?
                    Nuestro equipo técnico puede ayudarte.</p>
            </div>
        </div>
    </div>
@endsection