@extends('layouts.app')

@section('title', 'Hire-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">Hire-Developer<br>Onboarding Process</h2>

    <div class="alert alert-warning mt-4">
        <h5><b>Important Note</b></h5>
        <p>
            <b>⚠️ This is a manual Meta onboarding process that gives you full ownership and control of your Meta API.</b>  
            Registering your Business Profile without first upgrading your account is ineffective. Once your account is upgraded, our Dedicated Support team will guide you through the process.
        </p>
    </div>

    <p class="lead">
        No need to worry about connecting your WhatsApp API—our Dedicated Support team is ready to assist you every step of the way.
    </p>

    <p class="fw-bold">
        This process requires a <b>Basic, Premium, or Ultimate Plan</b>.
    </p>

    <h3 class="text-muted"><b>3 Key Steps to Connect Your WhatsApp API</b></h3>
    <ul>
        <li><b>Step 1 – Upgrade Your Account:</b> Choose the plan that best fits your business needs. </li>
        <li><b>Step 2 – Request Dedicated Support:</b> Contact Dedicated Support</li>
        <li><b>Step 3 – Pre-Onboarding:</b> Register Your Business Profile.</li>
    </ul>
</div>

                   <!-- 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>
    <button data-popup="chat" data-popup-url="/support" class="btn btn-secondary">
        Request Dedicated Support
    </button>
    <!-- Single Button -->
    <button data-popup="chat" data-popup-url="/onboarding-via-waps" class="btn btn-primary">
        Pre-Onboarding
    </button>
</div>


            </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
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    function openPopup() {
        document.getElementById('popup').style.display = 'flex';
    }
    function closePopup() {
        document.getElementById('popup').style.display = 'none';
    }
</script>

@endpush