@extends('layouts.app')

@section('title', 'Self-Onboarding – WapsChat')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <div class="card shadow-sm p-4 h-100">
                
                <!-- Icon -->
                <div class="card-icon mb-3 text-center">
                    <svg width="48" height="48" fill="#25D366" viewBox="0 0 24 24">
                        <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
                    </svg>
                </div>

                <!-- Heading -->
                <div class="text-center">
                    <h2 class="fw-bold mb-3">Self-Onboarding Process</h2>
                    <div class="alert alert-warning mt-4">
                   
                    <h5><b>Important Note</b></h5> <p><b>⚠️ This is the manual Meta onboarding process, which grants you full ownership and control of your Meta API.</b> Registering your Business Profile without first upgrading your account is pointless. Once your account is upgraded, you can proceed to set up your Developer Account and Developer App to complete the onboarding process.</p>
                </div>
                    <p class="lead">
                        Click the button below to get started. If the instructions are followed carefully, you will be connected to the WhatsApp API effortlessly, 
                        start managing messages, and automating responses directly from your WapsChat dashboard.
                    </p>
                    <p class="fw-bold">This requires a <b>Basic, Premium, or Ultimate Plan</b>.</p>
                    <p class="text-muted">
                        Please note: Setup assistance is not provided through general support; it is available only via Dedicated Support.
                    </p>

                    <!-- CTA Button -->
                   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#whatsappOnboardingModal">
                    Start Onboarding
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Optional custom CSS -->
@push('styles')
<style>
.card-icon svg {
    display: inline-block;
}
.card {
    border-radius: 12px;
}
.card-title {
    font-size: 1.5rem;
}
.lead {
    font-size: 1.1rem;
    line-height: 1.6;
}
</style>
@endpush


               

                

<!-- WhatsApp Onboarding Modal -->
<div class="modal fade" id="whatsappOnboardingModal" tabindex="-1" aria-labelledby="whatsappOnboardingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="whatsappOnboardingModalLabel">Onboard on WhatsApp API(For Self Onboarding)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
               <h2><b>Quick Guide: Onboarding to WhatsApp API</b></h2>
<p>Integrating with the WhatsApp API requires completing three essential steps. All steps must be finished for your setup to work correctly.</p>

<h3><b>3 Key Steps to Connect Your WhatsApp API</b></h3>
<p><b>1. Business Profile Approval:</b> Ensure your business profile is approved by Meta.</p>
<p><b>2. App Creation:</b> Create a developer app on <a href="https://developers.facebook.com" target="_blank">developers.facebook.com</a>.</p>
<p><b>3. WhatsApp Integration:</b> Add the WhatsApp product to your app and configure the settings.</p>

<h3><b>WapsChat Simplifies the Process</b></h3>
<p>The most common challenge is getting your business profile approved by Meta. Many users encounter delays due to incomplete documentation—but with WapsChat’s guidance, you can avoid these issues.</p>

<h3><b>Steps After Pre-Onboarding on This Portal</b></h3>
<p><b>Step-by-Step Instructions:</b></p>
<ul>
    <li><b>Step 1 – Upgrade Your Account:</b> Choose a plan that fits your business needs. <a href="/vendor-console/subscription">Click here to Upgrade</a>.</li>
    <li><b>Step 2 – Pre-Onboarding:</b> <a href="/onboarding-via-waps">Register Your Business Profile here</a>. <small>Complete this step only when you’re ready to connect your WhatsApp.</small></li>
    <li><b>Step 4 – Create Developer Account:</b> Visit <a href="https://developers.facebook.com" target="_blank">developers.facebook.com</a> and register for a developer account.</li>
    <li><b>Step 5 – App Creation:</b> Click <b>"My Apps" or "Create App"</b> to create a new app. You can watch a video guide here: <a href="https://wapschat.ng/resources" target="_blank">Watch Video Guide</a>.</li>
    <li><b>Step 6 – Add WhatsApp Product:</b> Include <b>WhatsApp</b> as a product in your newly created app.</li>
    <li><b>Step 7 – Configure App Settings:</b> From the side menu, click <b>App Settings</b>.</li>
    <li><i><b>Fill in the required information:</b></i> <ul> <li><b>App Name:</b> Choose any name you like (may be pre-filled automatically)</li> <li><b>Namespace:</b> Pick any available name or leave it blank</li> <li><b>App Domain:</b> https://wapschat.ng</li> <li><b>Privacy Policy URL:</b> https://wapschat.ng/privacy-policy</li> <li><b>Terms & Conditions URL:</b> https://wapschat.ng/terms</li> <li><b>Data Deletion URL:</b> https://wapschat.ng/account-delete</li> </ul> </li> <li>After filling in all details, click <b>Save</b>.</li> <li>Then, toggle your app to <b>Live Mode</b> using the button next to the developer switch.</li> <h3><b>Step 8 – Obtaining Your WhatsApp Business Account ID (WABA) and Access Tokens</b></h3> <ul> <li>From the side menu, select <b>WhatsApp → App Setup</b>.</li> <li>Scroll to find the number you added during onboarding. Your <b>WhatsApp Business Account ID (WABA)</b> will be displayed here. If not visible, go to <b>WhatsApp → Quickstart → Account Info → Settings → WhatsApp Account</b> and click your WhatsApp number — your WABA will be listed underneath.</li> </ul> <li><b>Access Tokens:</b> <ul> <li><b>1. Temporary Token (valid for 24 hours):</b> Go to <b>WhatsApp → App Setup</b> and generate a token.</li> <li><b>2. Permanent Token (Recommended):</b> Navigate to <b>WhatsApp → Quickstart → Account Info → Settings → System Users</b>. If no user exists, click <b>+Add</b>, enter your name, assign the <b>Admin role</b>, select the user, and generate a <b>Permanent token</b>.</li> </ul> </li> <p><b>For completing the Wapschat setup, you will need:</b></p> <ul> <li><b>Facebook App ID & App Secret:</b> Found under <b>App Settings → Basic</b>; copy both values.</li> <li><b>Access Token:</b> Permanent token recommended (as above)</li> <li><b>WhatsApp Business Account ID:</b> As described above</li> <li><b>Test Contact (Optional):</b> Provide a WhatsApp number to test message sending</li> </ul> <h3><b>Final Step – Connect to Wapschat</b></h3> <ul> <li>Go to <b>WapsChat Dashboard → Settings → WhatsApp Setup</b>.</li> <li>Paste your App ID, App Secret, Access Token, and WhatsApp Business Account ID.</li> <li>Follow the step-by-step prompts; completing each step unlocks the next one.</li> </ul>
                <br> <br>
                    <!-- Three buttons in one line -->
<div style="display: flex; gap: 10px; justify-content: center; align-items: center;">
    <button data-popup="chat" data-popup-url="/vendor-console/subscription" class="btn btn-danger">
        Upgrade Your Account
    </button>
    <!-- Single Button -->
    <button data-popup="chat" data-popup-url="/onboarding-via-waps" class="btn btn-primary">
        Pre-Onboarding
    </button>
</div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Fillout Feedback Widget -->
<div data-fillout-id="vkwwGs8YfPus"
     data-fillout-embed-type="popup"
     data-fillout-button-text="We Need Your Help"
     data-fillout-dynamic-resize
     data-fillout-button-color="#245644"
     data-fillout-button-float="bottom-right"
     data-fillout-inherit-parameters
     data-fillout-popup-size="medium">
</div>

<br><br><br><br>

<!-- Get to Know Sections - Triple Accordion -->
<div class="get-to-know-section">
    <div class="accordion" id="multiAccordion">

        <!-- Section 1: Onboarding -->
        <div class="accordion-item border-0">
            <h2 class="accordion-header" id="headingOnboarding">
                <button 
                    class="accordion-button collapsed p-0 bg-transparent shadow-none" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#collapseOnboarding" 
                    aria-expanded="false" 
                    aria-controls="collapseOnboarding"
                >
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div class="section-title d-flex align-items-center gap-2">
                            <span class="icon">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2L2 7l10 5 10-5M2 12v5l10 5 10-5M2 12h20v5"/>
                                </svg>
                            </span>
                            Onboarding Guide
                        </div>
                        <span class="steps-remaining">2 steps</span>
                    </div>
                </button>
            </h2>
            <div 
                id="collapseOnboarding" 
                class="accordion-collapse collapse" 
                aria-labelledby="headingOnboarding" 
                data-bs-parent="#multiAccordion"
            >
                <div class="accordion-body p-0 mt-3">
                    <div class="step-list">
                        <a href="https://wapschat.ng/onboarding" 
                           target="_blank" 
                           class="step-item text-decoration-none text-dark">
                            <div class="step-number">1</div>
                            <div class="step-content">Onboarding Detalis</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://wapschat.ng/resources" 
                           target="_blank" 
                           class="step-item text-decoration-none text-dark">
                            <div class="step-number">2</div>
                            <div class="step-content">Resources</div>
                            <div class="step-arrow">→</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
<br>======================================================================================================================
        <!-- Section 2: WhatsApp Setup -->
        <div class="accordion-item border-0">
            <h2 class="accordion-header" id="headingWhatsApp">
                <button 
                    class="accordion-button collapsed p-0 bg-transparent shadow-none" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#collapseWhatsApp" 
                    aria-expanded="false" 
                    aria-controls="collapseWhatsApp"
                >
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div class="section-title d-flex align-items-center gap-2">
                            <span class="icon">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2L2 7l10 5 10-5M2 12v5l10 5 10-5M2 12h20v5"/>
                                </svg>
                            </span>
                            WhatsApp API Setup
                        </div>
                        <span class="steps-remaining">3 steps</span>
                    </div>
                </button>
            </h2>
            <div 
                id="collapseWhatsApp" 
                class="accordion-collapse collapse" 
                aria-labelledby="headingWhatsApp" 
                data-bs-parent="#multiAccordion"
            >
                <div class="accordion-body p-0 mt-3">
                    <div class="step-list">
                        <a href="https://developers.facebook.com" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">1</div>
                            <div class="step-content">Create Meta Developer App</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://business.facebook.com/wa/manage/phone-numbers/?waba_id=418416871364445" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">2</div>
                            <div class="step-content">Manage Phone Numbers</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://business.facebook.com/latest/settings/business_users?business_id=2178486142553673&asset_id=3712369822391123" class="step-item text-decoration-none text-dark">
                            <div class="step-number">3</div>
                            <div class="step-content">Developer Business Settings</div>
                            <div class="step-arrow">→</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
<br>=========================================================================================================================
        <!-- Section 3: Compliance & Policies -->
        <div class="accordion-item border-0">
            <h2 class="accordion-header" id="headingPolicies">
                <button 
                    class="accordion-button collapsed p-0 bg-transparent shadow-none" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#collapsePolicies" 
                    aria-expanded="false" 
                    aria-controls="collapsePolicies"
                >
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div class="section-title d-flex align-items-center gap-2">
                            <span class="icon">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2L2 7l10 5 10-5M2 12v5l10 5 10-5M2 12h20v5"/>
                                </svg>
                            </span>
                            Support, Terms & Compliance
                        </div>
                        <span class="steps-remaining">4 docs</span>
                    </div>
                </button>
            </h2>
            <div 
                id="collapsePolicies" 
                class="accordion-collapse collapse" 
                aria-labelledby="headingPolicies" 
                data-bs-parent="#multiAccordion"
            >
                <div class="accordion-body p-0 mt-3">
                    <div class="step-list">
                        <a href="https://wa.me/2349066621067?text=WapsChat%20onboarding%20Support" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">1</div>
                            <div class="step-content">Still Confused, Get Support</div>
                            <div class="step-arrow">→</div>
                        </a>
                        
                        <a href="https://app.wapschat.ng/support/help" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">2</div>
                            <div class="step-content">More Confused, Get Dedicated Support</div>
                            <div class="step-arrow">→</div>
                             <!-- Calendly link widget begin -->
                         
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

<!--<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/wapschatsupport/30min'});return false;">Book a Demo Now</a>-->
<!-- Calendly link widget end -->
                        </a>
                          <a href="https://wapschat.ng/terms" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">3</div>
                            <div class="step-content">Review Terms of Service</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://wapschat.ng/privacy-policy" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">4</div>
                            <div class="step-content">Read Privacy Policy</div>
                            <div class="step-arrow">→</div>
                        </a>
                    </div>
                </div>
            </div>
<style>
.notification-card {
    background: #ffffff; /* Pure white background */
    border: 1px solid #e2e8f0; /* Subtle border for depth */
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: transform 0.3s ease;
}

.notification-card:hover {
    transform: translateY(-4px);
}
/* Description text styling */
.card-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color:#14040a; /* Soft gray for readability */
    margin: 0 auto 1.5rem;
    max-width: 650px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Optional: Add a subtle underline or emphasis on key phrases */
.card-description strong {
    color: #0f766e; /* WhatsApp green shade */
    font-weight: 600;
}
/* Blinking Glow Animation (green WhatsApp pulse) */
.notification-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    background: linear-gradient(45deg, 
        #f2f3f7, 
       #f2dae3, 
        #ffffff,
        #f2f3f7);
    background-size: 400% 400%;
    z-index: 0;
    animation: glowPulse 2.5s ease-in-out infinite;
    opacity: 0.6;
    filter: blur(20px);
}

@keyframes glowPulse {
    0%, 100% { background-position: 0% 50%; opacity: 0.4; }
    50% { background-position: 100% 50%; opacity: 0.7; }
}

/* Ensure content stays above glow */
.card-body {
    z-index: 2;
}
</style>



@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const whatsappBtn = document.getElementById('connectWhatsapp');
    const facebookBtn = document.getElementById('connectFacebook');

    if (whatsappBtn) {
        whatsappBtn.addEventListener('click', function() {
            window.open('https://business.facebook.com/messaging/whatsapp/onboard/?app_id=1327471375297043&config_id=836180885435540', '_blank');
        });
    }

    if (facebookBtn) {
        facebookBtn.addEventListener('click', function() {
            window.open('https://business.facebook.com/', '_blank');
        });
    }
});
</script>
@endsection

     
<style>
.float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #258a4f;
  color: white;
  padding: 15px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
  z-index: 1000;
}
.float-button:hover {
  background-color: #0a0d47;
}
</style>
<!-- Floating CTA Button -->
<!--<a href="/waps-onboarding-partner" id="floating-cta" class="floating-cta shadow-lg">
    💬 Get Started with WapsChat
</a>-->
 
<style>
.floating-cta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #12b76a, #0d9488);
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 1rem;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(18, 183, 106, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.floating-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(18, 183, 106, 0.6);
    background: linear-gradient(135deg, #10a35f, #0c857a);
}

/* Mobile optimization */
@media (max-width: 768px) {
    .floating-cta {
        bottom: 16px;
        right: 16px;
        padding: 10px 16px;
        font-size: 0.95rem;
    }
}

/* Hide on very small screens if needed (optional) */
@media (max-width: 360px) {
    .floating-cta {
        font-size: 0.85rem;
        padding: 9px 14px;
    }
}
</style>
@endsection