### 2. `index.php` - Halaman Kirim WA

### 1. `menu_kiri.php`
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<style>
body { min-height: 100vh; background: #f5f7fa; }
.sidebar {
    width: 200px;
    min-height: 100vh;
    background: #1e293b;
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}
.sidebar .nav-link {
    color: #cbd5e1;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: #334155;
    color: #fff;
}
.sidebar .brand {
    padding: 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #334155;
}
.content {
    margin-left: 200px;
    padding: 30px;
}
@media (max-width: 768px) {
    .sidebar { left: -250px; transition: 0.3s; }
    .sidebar.show { left: 0; }
    .content { margin-left: 0; }
}
</style>

<div class="sidebar" id="sidebar">
    <div class="brand">
        <i class="bi bi-whatsapp text-success"></i> WA Marketing
    </div>
    <ul class="nav flex-column mt-2">
        <li class="nav-item">
            <a href="dashboard.php" class="nav-link ">
                <i class="bi bi-speedometer2"></i> Dashboard
            </a>
        </li>
        <li class="nav-item">
            <a href="kontak_masuk.php" class="nav-link ">
                <i class="bi bi-inbox"></i> Pesan Masuk
            </a>
        </li>
        <li class="nav-item">
            <a href="index.php" class="nav-link ">
                <i class="bi bi-send"></i> Kirim
            </a>
        </li>
    </ul>
</div>

<div class="content">
<button class="btn btn-dark d-md-none mb-3" onclick="document.getElementById('sidebar').classList.toggle('show')">
    <i class="bi bi-list"></i>
</button>
<h3 class="mb-4">📱 Kirim Pesan WhatsApp</h3>

<div class="card p-4">
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#text">Teks</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#image">Gambar</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#button">Tombol</button></li>
    </ul>

    <div class="tab-content">
        <!-- Tab Teks -->
        <div class="tab-pane fade show active" id="text">
            <form method="POST">
                <input type="hidden" name="type" value="text">
                <div class="mb-3">
                    <label>Nomor Tujuan</label>
                    <textarea name="target" class="form-control" rows="2" placeholder="628123,628987" required></textarea>
                    <small class="text-muted">Pisah pakai koma. Format 62xxx, tanpa +</small>
                </div>
                <div class="mb-3">
                    <label>Pesan</label>
                    <textarea name="message" class="form-control" rows="4" placeholder="Halo {nama}, ada promo hari ini!" required></textarea>
                </div>
                <div class="mb-3">
                    <label>Delay Detik</label>
                    <input type="number" name="delay" value="3" class="form-control" min="2" max="10">
                </div>
                <button class="btn btn-success w-100">Kirim Teks</button>
            </form>
        </div>

        <!-- Tab Gambar -->
        <div class="tab-pane fade" id="image">
            <form method="POST">
                <input type="hidden" name="type" value="image">
                <div class="mb-3">
                    <label>Nomor Tujuan</label>
                    <input type="text" name="target" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>URL Gambar</label>
                    <input type="url" name="image_url" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Caption</label>
                    <textarea name="message" class="form-control" rows="3"></textarea>
                </div>
                <button class="btn btn-success w-100">Kirim Gambar</button>
            </form>
        </div>

        <!-- Tab Tombol -->
        <div class="tab-pane fade" id="button">
            <form method="POST">
                <input type="hidden" name="type" value="button">
                <div class="mb-3">
                    <label>Nomor Tujuan</label>
                    <input type="text" name="target" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Pesan</label>
                    <textarea name="message" class="form-control" rows="3" required></textarea>
                </div>
                <div class="mb-3">
                    <label>Tombol 1</label>
                    <div class="row g-2">
                        <div class="col"><input name="btn_text[]" class="form-control" placeholder="Teks Tombol"></div>
                        <div class="col"><input name="btn_payload[]" class="form-control" placeholder="Payload/URL"></div>
                    </div>
                </div>
                <div class="mb-3">
                    <label>Tombol 2</label>
                    <div class="row g-2">
                        <div class="col"><input name="btn_text[]" class="form-control"></div>
                        <div class="col"><input name="btn_payload[]" class="form-control"></div>
                    </div>
                </div>
                <button class="btn btn-success w-100">Kirim Tombol</button>
            </form>
        </div>
    </div>
</div>

</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>