<?php require_once("./pin/header.php"); ?>
<?php require_once("./pin/navbar.php"); ?>
<?php require_once("./pin/sidebar.php"); ?>


<div class="content-page">
    <div class="content" id="scheduledSection">
        <!-- broadcast analytics page -->
        <div class="d-flex align-items-center justify-content-between p-3 rounded mt-3">
            <h2 class="m-0">Scheduled Broadcast</h2>

            <div class="d-flex align-items-center gap-2">
                <div class="input-group" style="width: 300px;">
                    <input type="text" class="form-control" placeholder="Search...">
                    <span class="input-group-text">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" style="fill: rgba(13, 13, 13, 0.62);">
                            <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
                        </svg>
                    </span>
                </div>

                <button class="btn btn-success" id="showBroadcast">
                 New Broadcast
                </button>
            </div>
        </div>

        <!-- table-->
        <div class="mt-3 p-3 border rounded bg-white">
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Broadcast Name</th>
                        <th>Scheduled</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Promo Campaign</td>
                        <td>March 5, 2025 - 10:00 AM</td>
                        <td>
                            <button class="btn btn-sm btn-primary">Edit</button>
                            <button class="btn btn-sm btn-danger">Delete</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Newsletter</td>
                        <td>March 6, 2025 - 3:00 PM</td>
                        <td>
                            <button class="btn btn-sm btn-primary">Edit</button>
                            <button class="btn btn-sm btn-danger">Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div> <!-- container-fluid -->
    <?php require_once("new_broadcast.php"); ?>
</div> <!-- content -->
<script>
    document.getElementById("showBroadcast").addEventListener("click", function() {
        document.getElementById("scheduledSection").classList.add("d-none");
        document.getElementById("anotherSection").classList.remove("d-none");
    });
    document.getElementById("toggleBroadcast").addEventListener("click", function() {
        document.getElementById("scheduledSection").classList.remove("d-none");
        document.getElementById("anotherSection").classList.add("d-none");
    });
</script>
<?php require_once("./pin/modals.php"); ?>
<?php require_once("./pin/footer.php"); ?>