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

<style>
    .analytics-box {
        background-color: #edf1ff;
        padding: 10px;
        width: 180px;
        gap: 20px;
    }

    .table-paragraphs {
        color: rgb(107, 107, 104);
        margin: 0px;
    }

</style>

<div class="content-page">
    <div class="content">
        <!-- broadcast analytics page -->
        <div id="broadcastAnalytics">
            <!-- Start Content-->
            <div class="container-fluid">
                <div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between">
                            <h2 class="fw-bold m-0">Broadcast Analytics</h2>
                            <div>
                                <button class="btn btn-success" id="addNewTemplate">New Broadcast</button>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-sm-center">
                    <h3>Overview</h3>
                    <div class="py-3 d-flex align-items-sm-center justify-content-between flex-sm-row flex-column">
                        <div>
                            <div class="d-flex align-items-center gap-2">
                                <div>
                                    <select class="form-select" name="" id="">
                                        <option value="">Last 7 days</option>
                                        <option value="">Created Date</option>
                                    </select>
                                </div>
                                <div>
                                    <select class="form-select" name="" id="">
                                        <option value="">21 feb 2025</option>
                                        <option value="">Created Date</option>
                                    </select>
                                </div>
                                <div>
                                    <select class="form-select" name="" id="">
                                        <option value="">21 feb 2025</option>
                                        <option value="">Created Date</option>
                                    </select>
                                </div>
                                <button class="btn btn-light text-dark d-flex align-items-center rounded-2 px-2 py-1"
                                    style="border: 1px solid grey; text-decoration: none;"
                                    data-bs-toggle="modal" data-bs-target="#exportContactModal">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                        style="fill: rgba(0, 0, 0, 1); margin-right: 5px;">
                                        <path d="M11 16h2V7h3l-4-5-4 5h3z"></path>
                                        <path d="M5 22h14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2h-4v2h4v9H5v-9h4V9H5c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2z"></path>
                                    </svg>
                                    Export
                                </button>
                                <div class="border rounded-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                        <path d="M10 11H7.101l.001-.009a4.956 4.956 0 0 1 .752-1.787 5.054 5.054 0 0 1 2.2-1.811c.302-.128.617-.226.938-.291a5.078 5.078 0 0 1 2.018 0 4.978 4.978 0 0 1 2.525 1.361l1.416-1.412a7.036 7.036 0 0 0-2.224-1.501 6.921 6.921 0 0 0-1.315-.408 7.079 7.079 0 0 0-2.819 0 6.94 6.94 0 0 0-1.316.409 7.04 7.04 0 0 0-3.08 2.534 6.978 6.978 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4 4-4zm4 2h2.899l-.001.008a4.976 4.976 0 0 1-2.103 3.138 4.943 4.943 0 0 1-1.787.752 5.073 5.073 0 0 1-2.017 0 4.956 4.956 0 0 1-1.787-.752 5.072 5.072 0 0 1-.74-.61L7.05 16.95a7.032 7.032 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.07 7.07 0 0 0 2.818 0 7.031 7.031 0 0 0 4.395-2.945 6.974 6.974 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4-4 4z"></path>
                                    </svg>
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex p-1 rounded-3 w-100 gap-3">
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(37, 214, 82, 1);">
                                    <path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Sent</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(33, 216, 40, 1);">
                                    <path d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Delivered</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(33, 216, 40, 1);">
                                    <path d="M12 9a3.02 3.02 0 0 0-3 3c0 1.642 1.358 3 3 3 1.641 0 3-1.358 3-3 0-1.641-1.359-3-3-3z"></path>
                                    <path d="M12 5c-7.633 0-9.927 6.617-9.948 6.684L1.946 12l.105.316C2.073 12.383 4.367 19 12 19s9.927-6.617 9.948-6.684l.106-.316-.105-.316C21.927 11.617 19.633 5 12 5zm0 12c-5.351 0-7.424-3.846-7.926-5C4.578 10.842 6.652 7 12 7c5.351 0 7.424 3.846 7.926 5-.504 1.158-2.578 5-7.926 5z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Read</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg viewBox="-0.5 0 28 28" version="1.1" width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <title>reply</title>
                                        <desc>Created with Sketch Beta.</desc>
                                        <defs> </defs>
                                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                                            <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-100.000000, -1193.000000)" fill="#43c832">
                                                <path d="M113,1208 C112.346,1208 109.98,1208.02 109.98,1208.02 L109.98,1213.39 L102.323,1205 L109.98,1196.6 L109.98,1202.01 C109.98,1202.01 112.48,1201.98 113,1202 C120.062,1202.22 124.966,1210.26 124.998,1214.02 C122.84,1211.25 117.17,1208 113,1208 L113,1208 Z M111.983,1200.01 L111.983,1194.11 C112.017,1193.81 111.936,1193.51 111.708,1193.28 C111.312,1192.89 110.67,1192.89 110.274,1193.28 L100.285,1204.24 C100.074,1204.45 99.984,1204.72 99.998,1205 C99.984,1205.27 100.074,1205.55 100.285,1205.76 L110.219,1216.65 C110.403,1216.88 110.67,1217.03 110.981,1217.03 C111.265,1217.03 111.518,1216.91 111.7,1216.72 C111.702,1216.72 111.706,1216.72 111.708,1216.71 C111.936,1216.49 112.017,1216.18 111.983,1215.89 C111.983,1215.89 112,1210.34 112,1210 C118.6,1210 124.569,1214.75 125.754,1221.01 C126.552,1219.17 127,1217.15 127,1215.02 C127,1206.73 120.276,1200.01 111.983,1200.01 L111.983,1200.01 Z" id="reply" sketch:type="MSShapeGroup"> </path>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Replied</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(33, 216, 40, 1);">
                                    <path d="m21.426 11.095-17-8A1 1 0 0 0 3.03 4.242l1.212 4.849L12 12l-7.758 2.909-1.212 4.849a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Sending</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(33, 216, 40, 1);">
                                    <path d="M16 2H8C4.691 2 2 4.691 2 8v13a1 1 0 0 0 1 1h13c3.309 0 6-2.691 6-6V8c0-3.309-2.691-6-6-6zm4 14c0 2.206-1.794 4-4 4H4V8c0-2.206 1.794-4 4-4h8c2.206 0 4 1.794 4 4v8z"></path>
                                    <path d="M15.292 7.295 12 10.587 8.708 7.295 7.294 8.709l3.292 3.292-3.292 3.292 1.414 1.414L12 13.415l3.292 3.292 1.414-1.414-3.292-3.292 3.292-3.292z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Failed</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(33, 216, 40, 1)">
                                    <path d="M10 11H7.101l.001-.009a4.956 4.956 0 0 1 .752-1.787 5.054 5.054 0 0 1 2.2-1.811c.302-.128.617-.226.938-.291a5.078 5.078 0 0 1 2.018 0 4.978 4.978 0 0 1 2.525 1.361l1.416-1.412a7.036 7.036 0 0 0-2.224-1.501 6.921 6.921 0 0 0-1.315-.408 7.079 7.079 0 0 0-2.819 0 6.94 6.94 0 0 0-1.316.409 7.04 7.04 0 0 0-3.08 2.534 6.978 6.978 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4 4-4zm4 2h2.899l-.001.008a4.976 4.976 0 0 1-2.103 3.138 4.943 4.943 0 0 1-1.787.752 5.073 5.073 0 0 1-2.017 0 4.956 4.956 0 0 1-1.787-.752 5.072 5.072 0 0 1-.74-.61L7.05 16.95a7.032 7.032 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.07 7.07 0 0 0 2.818 0 7.031 7.031 0 0 0 4.395-2.945 6.974 6.974 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4-4 4z"></path>
                                </svg>

                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Processing</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>

                        </div>
                    </div>
                    <div class="rounded-3 analytics-box">
                        <div class="d-flex align-items-center justify-content-between">
                            <h3>19928</h3>
                            <div style="border-radius: 9999px; background-color: rgb(255, 255, 255); padding:3px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(33, 216, 40, 1);">
                                    <path d="M4 22h12v-2H4V8H2v12c0 1.103.897 2 2 2z"></path>
                                    <path d="M20 2H8c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm-2 9h-3v3h-2v-3h-3V9h3V6h2v3h3v2z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="d-flex" style="gap:0.2rem; margin-right:40px;">
                            <p>Queued</p>
                            <div class="d-flex align-items-center justify-content-center" style="background-color:#edf1ff; border-radius:9999px;height:12px; width:12px; border:1px solid black; margin-top:5px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
                                    <path d="M12 4C9.243 4 7 6.243 7 9h2c0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.069-.454 1.465-1.481 2.255-.382.294-.813.626-1.226 1.038C10.981 13.604 10.995 14.897 11 15v2h2v-2.009c0-.024.023-.601.707-1.284.32-.32.682-.598 1.031-.867C15.798 12.024 17 11.1 17 9c0-2.757-2.243-5-5-5zm-1 14h2v2h-2z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin: 20px 0px" class="d-flex align-items-center gap-5">
                    <div>
                        <h3 class="fw-bold mb-0">Broadcast list</h3>
                    </div>
                    <div class="d-flex align-items-center gap-3 justify-content-center">
                        <div>
                            <h5 class="fw-bold mb-0">Sorted by:</h5>
                        </div>
                        <div>
                            <select class="form-select">
                                <option value="">Latest</option>
                                <option value="">Created Date</option>
                            </select>
                        </div>
                        <div>
                            <div class="input-group" style="width: 350px;">
                                <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>
                        </div>
                        <button class="rounded-3 border-0 d-flex align-items-center justify-content-center btn btn-success"
                            style="padding: 8px; margin-left: -10px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                style="fill: rgb(255, 255, 255);">
                                <path d="M21 3H5a1 1 0 0 0-1 1v2.59c0 .523.213 1.037.583 1.407L10 13.414V21a1.001 1.001 0 0 0 1.447.895l4-2c.339-.17.553-.516.553-.895v-5.586l5.417-5.417c.37-.37.583-.884.583-1.407V4a1 1 0 0 0-1-1zm-6.707 9.293A.996.996 0 0 0 14 13v5.382l-2 1V13a.996.996 0 0 0-.293-.707L6 6.59V5h14.001l.002 1.583-5.71 5.71z"></path>
                            </svg>
                        </button>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="card overflow-hidden">
                        <!-- <div class="card-header">
                                <div class="d-flex align-items-center">
                                    <h5 class="card-title mb-0">All Templates</h5>
                                </div>
                            </div> -->

                        <div class="card-body mt-0">
                            <div class="table-responsive table-card mt-0">
                                <table
                                    class="table table-borderless table-centered align-middle table-nowrap mb-0">
                                    <thead class="text-muted table-light">
                                        <tr>
                                            <th scope="col" class="cursor-pointer">Broadcast name</th>
                                            <th scope="col" class="cursor-pointer">Total recipients</th>
                                            <th scope="col" class="cursor-pointer">Successful</th>
                                            <th scope="col" class="cursor-pointer">Read</th>
                                            <th scope="col" class="cursor-pointer">Replied</th>
                                            <th scope="col" class="cursor-pointer" style="background-color: #fffdf0;">
                                                <div class="d-flex align-items-center">
                                                    <span style="font-size: 14px;">Website clicks</span>
                                                    <div class="ms-1 px-1 py-0 rounded-1 d-flex align-items-center" style="background-color: #fcc484;">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                                            style="fill: rgba(255, 255, 255, 1);">
                                                            <path d="M17.813 3.838A2 2 0 0 0 16.187 3H7.813c-.644 0-1.252.313-1.667.899l-4 6.581a.999.999 0 0 0 .111 1.188l9 10a.995.995 0 0 0 1.486.001l9-10a.997.997 0 0 0 .111-1.188l-4.041-6.643zM12 19.505 5.245 12h13.509L12 19.505zM4.777 10l3.036-5 8.332-.062L19.222 10H4.777z"></path>
                                                        </svg>
                                                        <p class="ms-1 mb-0 text-white fw-bold" style="font-size: 12px;">PRO</p>
                                                    </div>
                                                </div>
                                            </th>
                                            <th scope="col" class="cursor-pointer">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div>
                                                    <p class="mb-0 text-primary">data1eng13mar</p>
                                                </div>
                                                <div>
                                                    <p class="table-paragraphs">2025-2-28 12:16 PM</p>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs m-0">1 Contacts</p>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">1(100%)</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                                        100%
                                                    </div>
                                                </div>

                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">- -</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px; background-color: #e9ecef;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                        0%
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">- -</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px; background-color: #e9ecef;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                        0%
                                                    </div>
                                                </div>
                                            </td>
                                            <td style="background-color: #fffdf0;">
                                                <span>Upgrade to click in-depth click insights</span>
                                                <button class="btn btn-success d-flex align-items-center text-white fw-bold rounded-3 px-2 py-1 border-0"
                                                    style="margin:5px">
                                                    Upgrade
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                                        style="fill: rgb(255, 255, 255); margin-left: 5px;">
                                                        <path d="M5 20h14v-2H5v2zm7-18l-6 6h4v6h4v-6h4l-6-6z"></path>
                                                    </svg>
                                                </button>
                                            </td>
                                            <td>
                                                <button class="btn text-white d-flex align-items-center px-3 py-1 rounded"
                                                    style="background: linear-gradient(45deg, #28a745, #007bff); border: none;">
                                                    View Insights
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                                        style="fill: rgba(255, 255, 255, 1); margin-left: 8px;">
                                                        <path d="M9 6h2v14H9zm4 2h2v12h-2zm4-4h2v16h-2zM5 12h2v8H5z"></path>
                                                    </svg>
                                                </button>
                                            </td>
                                        </tr>
                                        <!-- second row start -->
                                        <tr>
                                            <td>
                                                <div>
                                                    <p class="text-primary m-0">data1eng13mar</p>
                                                </div>
                                                <div>
                                                    <p class="table-paragraphs">2025-2-28 12:16 PM</p>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs m-0">1 Contacts</p>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs m-0">1(100%)</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                                        100%
                                                    </div>
                                                </div>

                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">- -</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px; background-color: #e9ecef;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                        0%
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">- -</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px; background-color: #e9ecef;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                        0%
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-primary-subtle text-primary fw-semibold">New Lead</span>
                                            </td>
                                            <td>
                                                <button class="btn text-white d-flex align-items-center px-3 py-1 rounded"
                                                    style="background: linear-gradient(45deg, #28a745, #007bff); border: none;">
                                                    View Insights
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                                        style="fill: rgba(255, 255, 255, 1); margin-left: 8px;">
                                                        <path d="M9 6h2v14H9zm4 2h2v12h-2zm4-4h2v16h-2zM5 12h2v8H5z"></path>
                                                    </svg>
                                                </button>
                                            </td>
                                        </tr>
                                        <!-- second row end -->
                                        <tr>
                                            <td>
                                                <div>
                                                    <p class="text-primary m-0">data1eng13mar</p>
                                                </div>
                                                <div>
                                                    <p class="table-paragraphs">2025-2-28 12:16 PM</p>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs" margin:0px">1 Contacts</p>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">1(100%)</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                                        100%
                                                    </div>
                                                </div>

                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">- -</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px; background-color: #e9ecef;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                        0%
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <p class="table-paragraphs">- -</p>
                                                </div>
                                                <div class="progress mt-2" style="width: 100px; background-color: #e9ecef;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                        0%
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-primary-subtle text-primary fw-semibold">New Lead</span>
                                            </td>
                                            <td>
                                                <button class="btn text-white d-flex align-items-center px-3 py-1 rounded"
                                                    style="background: linear-gradient(45deg, #28a745, #007bff); border: none;">
                                                    View Insights
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                                        style="fill: rgba(255, 255, 255, 1); margin-left: 8px;">
                                                        <path d="M9 6h2v14H9zm4 2h2v12h-2zm4-4h2v16h-2zM5 12h2v8H5z"></path>
                                                    </svg>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody><!-- end tbody -->
                                </table><!-- end table -->
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>

        <?php require_once("new_broadcast.php"); ?>


    </div> <!-- container-fluid -->
</div> <!-- content -->

<!-- Footer Start -->
<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col fs-13 text-muted text-center">
                &copy; <script>
                    document.write(new Date().getFullYear())
                </script> - Made with <span class="mdi mdi-heart text-danger"></span> by <a href="#!" class="text-reset fw-semibold">Watify.io</a>
            </div>
        </div>
    </div>
</footer>
<!-- end Footer -->

</div>
<script>
    // download file function
    function downloadFile() {
        const link = document.createElement('a');
        link.href = "https://app.watify.io/assets/csv/Contacts_Upload_Sample.csv";
        link.download = "Contacts_Upload_Sample.csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    document.getElementById("addNewTemplate").addEventListener("click", function() {
        document.getElementById("broadcastAnalytics").classList.add("d-none");
        document.getElementById("anotherSection").classList.remove("d-none");
    });
    document.addEventListener("DOMContentLoaded", function() {
        const sendNow = document.getElementById("sendNow");
        const scheduleTime = document.getElementById("scheduleTime");
        const dateTimeSection = document.getElementById("dateTimeSection");

        function toggleDateTimeSection() {
            dateTimeSection.classList.toggle("d-none", !scheduleTime.checked);
        }

        sendNow.addEventListener("change", toggleDateTimeSection);
        scheduleTime.addEventListener("change", toggleDateTimeSection);
    });
</script>

<?php require_once("./pin/modals.php"); ?>
<?php require_once("./pin/footer.php"); ?>