<!-- Begin Page Content -->
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-md-6">
            <h1 class="h3 mb-2 text-gray-800"><i class="fab fa-whatsapp text-success"></i> Send WhatsApp Message</h1>
        </div>
    </div>

    <!-- WhatsApp Settings Status -->
    <?php if(empty($res_whatsapp) || empty($res_whatsapp[0]['api_key'])): ?>
    <div class="alert alert-warning">
        <i class="fas fa-exclamation-triangle"></i> WhatsApp API is not configured.
        <a href="whatsapp_settings.php" class="alert-link">Click here to configure</a>
    </div>
    <?php endif; ?>

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fab fa-whatsapp text-success"></i> Send WhatsApp Message
            </h6>
        </div>
        <div class="card-body">
            <div id="whatsapp_form_container">
                <form name="send_whatsapp" id="send_whatsapp" method="post" onsubmit="return false;">
                    <div class="row">
                        <div class="col-md-6">
                            <label>Select User Type</label>
                            <select name="user_type" id="user_type" class="form-control" required>
                                <option value="0">-- Select User Type --</option>
                                <option value="All">All Users</option>
                                <?= user_types('0'); ?>
                            </select>
                        </div>
                    </div>

                    <div class="row top_margin_10">
                        <div class="col-md-6">
                            <label>Or Enter Mobile Number (with country code)</label>
                            <input type="text" class="form-control" name="phone_number" id="phone_number" placeholder="e.g., 918007819235" />
                            <small class="text-muted">Enter number with country code without + sign (e.g., 918007819235 for India)</small>
                        </div>
                    </div>

                    <div class="row top_margin_10">
                        <div class="col-md-6">
                            <label>Message <span class="text-danger">*</span></label>
                            <textarea class="form-control" rows="5" name="message" id="message" placeholder="Enter your message here..." required></textarea>
                        </div>
                    </div>

                    <div class="row top_margin_10">
                        <div class="col-md-6">
                            <label>Footer (Optional)</label>
                            <input type="text" class="form-control" name="footer" id="footer" placeholder="e.g., Sent via <?= $res_site[0]['site_name']; ?>" />
                        </div>
                    </div>

                    <div class="row top_margin_10">
                        <div class="col-md-6">
                            <input type="hidden" name="updte" id="updte" value="1" />
                            <button type="submit" name="send" id="send_btn" class="btn btn-success">
                                <i class="fab fa-whatsapp"></i> Send WhatsApp
                            </button>
                            <button type="button" name="Reset" id="Reset" class="btn btn-secondary" onclick="resetForm()">
                                <i class="fas fa-redo"></i> Reset
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="whatsapp_processing" style="display:none;" class="text-center">
                <?php include "processing.php"; ?>
                <p class="mt-3">Sending WhatsApp message(s)...</p>
            </div>

            <!-- Response Log -->
            <div id="response_log" class="mt-4" style="display:none;">
                <h6 class="font-weight-bold">Response Log:</h6>
                <div id="log_content" class="border p-3 bg-light" style="max-height: 300px; overflow-y: auto;"></div>
            </div>
        </div>
    </div>
</div>
<!-- /.container-fluid -->
