<?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;
    }

    .preview-message-container {
        background: #fff;
        width: 200px;
        padding: 8px;
        border-radius: 10px;
        margin-left: 10px;
        margin-top: 10px;
        overflow-wrap: break-word;
    }

    .preview-message-container p {
        margin-bottom: 0px;
    }

    .preview-message-container p:last-child {
        margin-bottom: 5px;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .shimmer {
        position: relative;
        overflow: hidden;
        background: #e0e0e0;
    }

    .shimmer::after {
        content: '';
        position: absolute;
        top: 0;
        left: -150px;
        height: 100%;
        width: 150px;
        background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
        animation: shimmer-slide 1.2s infinite linear;
    }

    @keyframes shimmer-slide {
        0% {
            left: -150px;
        }

        100% {
            left: 100%;
        }
    }

    /* .refresh-btn {
        padding: 3px;
        background-color: #f0f4f7;
        border: 1px solid grey !important;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }

    .refresh-btn:hover {
        background-color: white !important;
    } */
    .refresh-btn {
        border: none;
        outline: none;
        background: none;
    }

    .refresh-btn svg {
        transition: transform 0.3s ease-in-out;
        cursor: pointer;
    }

    .refresh-btn.rotated svg {
        animation: invert_rotate360 0.5s ease-in-out;
    }

    @keyframes invert_rotate360 {
        from {
            transform: rotate(360deg);
        }

        to {
            transform: rotate(0deg);
        }
    }

    @keyframes rotate360 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .card-1 {
        flex: 1;
        /* flex-basis: 33.3%; */
        border-radius: 10px;
    }

    .card-1-head {
        font-size: 1rem;
    }

    .card-1-progress {
        height: 10px;
        background-color: lightgrey;
        margin: 5px 0px;
    }

    .card-1-progress div {
        width: 10rem;
        border-radius: 30px;
    }

    .card-2 {
        /* flex-basis: 33.3%; */
        flex: 1;
        border-radius: 10px;
        gap: 0.5rem;
    }

    .card-2-head {
        font-size: 1rem;
    }

    .card-3 {
        flex-basis: 26%;
        border-radius: 10px;
    }

    .card-3-head {
        font-size: 1rem;
    }

    /* Three dots loader */
    .dots-loader {
        display: flex;
        gap: 4px;
        justify-content: center;
        align-items: center;
        height: 20px;
    }

    .dots-loader span {
        width: 6px;
        height: 6px;
        background-color: #287F71;
        border-radius: 50%;
        animation: bounce 0.6s infinite ease-in-out;
    }

    .dots-loader span:nth-child(1) {
        animation-delay: 0s;
    }

    .dots-loader span:nth-child(2) {
        animation-delay: 0.1s;
    }

    .dots-loader span:nth-child(3) {
        animation-delay: 0.2s;
    }

    @keyframes bounce {

        0%,
        80%,
        100% {
            transform: translateY(0);
            opacity: 0.6;
        }

        40% {
            transform: translateY(-6px);
            opacity: 1;
        }
    }

    #export-loading {
        display: none;
        margin: 10px;
        gap: 10px;
        align-items: center;
    }

    #export-loading div:nth-child(1) span {
        font-size: 25px;
    }

    #export-loading div:nth-child(1) span::before {
        animation: rotate360 1s ease-in-out infinite;
        color: #287F71;
    }

    #export-loading div:nth-child(2) {
        flex: 1;
    }

    #export-loading div:nth-child(2) div {
        height: 5px;
        background-color: #287F71;
        width: 0%;
        border-radius: 20px;
        transition: width 0.5s;
    }

    @media screen and (max-width: 1124px) {
        .card-1-img {
            margin-right: 5px !important;
        }

        .card-1-head {
            font-size: 0.8rem;
        }

        .card-1-progress {
            margin: 7px 0px;
        }

        .card-1-total-contact {
            font-size: 12px;
        }

        .card-1-limit-ques {
            font-size: 11px;
        }

        .card-2 {
            gap: 0px;
        }

        .card-2-head {
            font-size: 0.9rem;
        }

        .card-3-head {
            font-size: 0.9rem;
        }
    }
</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 cursor-pointer fw-bold" name="" id="broadcast_date_filter">
                                        <option value="custom_range">Custom range</option>
                                        <option value="today">Today</option>
                                        <option value="yesterday">Yesterday</option>
                                        <option value="last_7_days">Last 7 days</option>
                                        <option value="last_30_days">30 days</option>
                                    </select>
                                </div>
                                <div>
                                    <input type="date" id="start_date" class="form-control cursor-pointer fw-bold" onclick="this.showPicker()" value="<?php echo date('Y-m-d'); ?>">
                                    <!-- <select class="form-select" name="" id="">
                                        <option value="">21 feb 2025</option>
                                        <option value="">Created Date</option>
                                    </select> -->
                                </div>
                                <div>
                                    <input type="date" id="end_date" class="form-control cursor-pointer fw-bold" onclick="this.showPicker()" value="<?php echo date('Y-m-d'); ?>">
                                    <!-- <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;"
                                    id="export-broadcast">
                                    <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>
                                <button type="button" class="refresh-btn">
                                    <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>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="export-loading">
                    <div>
                        <span class="mdi mdi-autorenew"></span>
                    </div>
                    <div>
                        <div></div>
                    </div>
                    <div>
                        <div class="dots-loader">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between gap-2 mb-2">
                    <div class="d-flex bg-white border p-2 align-items-start card-1">
                        <!-- SVG Icon -->
                        <div class="me-3 position-relative card-1-img" style="bottom: 8px;">
                            <span class="mdi mdi-crown" style="font-size: 2rem; color: #287F71;"></span>
                        </div>

                        <!-- Text and Progress Info -->
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="mb-0 fw-bold card-1-head">Your daily Meta messaging limit</p>
                            </div>

                            <div class="progress card-1-progress">
                                <div class="progress-bar bg-success"></div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <p class="mb-0 text-muted card-1-total-contact"><span>976</span> / <span>1,000,000</span> Contacts</p>
                                <a href="#" class="text-decoration-none text-primary fw-semibold card-1-limit-ques">What are limits?</a>
                            </div>
                        </div>
                    </div>

                    <div class="card-2 d-flex align-items-start border bg-white p-2">
                        <div class="d-flex align-items-center gap-2 position-relative" style="bottom: 8px;">
                            <span class="mdi mdi-lightning-bolt-outline" style="font-size: 2.2rem; color: gold;"></span>
                        </div>

                        <div>
                            <div>
                                <span class="fw-bold card-2-head">Consecutive days of messaging</span>
                                <span class="mdi mdi-help-circle-outline" style="font-size: 1rem; color:rgba(33, 216, 40, 1);"></span>
                                <!-- <span class="mdi mdi-help" style="border: 1px solid lightgrey; color: grey; border-radius: 50%; padding: 3px; font-size: 10px;"></span> -->
                            </div>
                            <div class="d-flex align-items-center gap-2 mt-2" style="margin-left: 7px;">
                                <span class="mdi mdi-circle-outline" style="color: #edc801; font-weight: bold; font-size: 1.2rem;"></span>
                                <span class="mdi mdi-circle-outline" style="color: #edc801; font-weight: bold; font-size: 1.2rem;"></span>
                                <span class="mdi mdi-circle-outline" style="color: #edc801; font-weight: bold; font-size: 1.2rem;"></span>
                                <span class="mdi mdi-circle-outline" style="color: #edc801; font-weight: bold; font-size: 1.2rem;"></span>
                                <span class="mdi mdi-circle-outline" style="color: #edc801; font-weight: bold; font-size: 1.2rem;"></span>
                                <span class="mdi mdi-circle-outline" style="color: #edc801; font-weight: bold; font-size: 1.2rem;"></span>
                                <span class="mdi mdi-circle-outline" style="color: #edc801; font-weight: bold; font-size: 1.2rem;"></span>
                            </div>
                        </div>
                    </div>

                    <div class="card-3 d-flex align-items-start border p-2 bg-white gap-2">
                        <div class="position-relative" style="bottom:8px;">
                            <span class="mdi mdi-shield-check-outline" style="font-size: 2rem; color: #108dff;"></span>
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-1">
                                <span class="fw-bold card-3-head">Messaging Quality</span>
                                <span class="mdi mdi-help-circle-outline" style="font-size: 1rem; color: rgba(33, 216, 40, 1);"></span>
                            </div>
                            <div class="d-flex gap-2">
                                <span class="mdi mdi-signal-cellular-3" style="font-size: 1.5rem; color: #108dff;"></span>
                                <span class="fw-medium" style="color: #108dff;">High</span>
                            </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 sorted-by">
                                <option value="latest">Latest</option>
                                <option value="created-date">Created Date</option>
                            </select>
                        </div>
                        <div>
                            <div class="input-group" style="width: 350px;">
                                <input type="text" class="form-control" placeholder="Search..." id="search_broadcast">
                                <span class="input-group-text" id="search_broadcast_icon">
                                    <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 id="broadcast_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_t.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>
    let broadcast_table_data = [];

    function get_shimmer() {
        return `
            <tr>
                <td><div class="shimmer" style="height: 20px; border-radius: 4px;"></div></td>
                <td><div class="shimmer" style="height: 20px; border-radius: 4px;"></div></td>
                <td><div class="shimmer" style="height: 20px; border-radius: 4px;"></div></td>
                <td><div class="shimmer" style="height: 20px; border-radius: 4px;"></div></td>
                <td><div class="shimmer" style="height: 20px; border-radius: 4px;"></div></td>
                <td><div class="shimmer" style="height: 20px; border-radius: 4px;"></div></td>
                <td><div class="shimmer" style="height: 20px; border-radius: 4px;"></div></td>
            </tr>
        `;
    }

    function get_new_broadcast_row(broadcast_name, total_recipients, scheduled_at, set_marker) {
        function dateFormatter(dateStr) {
            if (!dateStr) {
                console.log("Missing Field: dataStr");
                return;
            }

            const [datePart, timePart] = dateStr.split(" ");
            let [hour, minute, second] = timePart.split(":").map(Number);

            const ampm = hour >= 12 ? 'PM' : 'AM';
            hour = hour % 12 || 12; // Convert to 12-hour format

            return `${datePart} ${hour}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')} ${ampm}`;
        }

        return `
        <tr>
            <td>
                <div>
                    <p class="text-primary m-0">${broadcast_name}</p>
                </div>
                <div>
                    <p class="table-paragraphs">${dateFormatter(scheduled_at)}</p>
                </div>
            </td>
            <td>
                <div>
                    <p class="table-paragraphs m-0">${total_recipients} 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 ${set_marker?'style="background-color: #fffdf0;"':''}>
                ${set_marker?`<div>
                    <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>
                </div>`:''}
                ${!set_marker?'<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>
    `;
    }

    function reset_table() {
        return `
         <table id="all_contacts_table" class="table table-bordered">
            <thead class="table-light">
                <tr>
                    <th><input type="checkbox" id="selectAll"></th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th style="text-align: center;">Allow Broadcast</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        `;
    }

    function load_broadcasts(search = "", sortBy = "latest", filter_type = null, start_date = null, end_date = null) {
        const broadcast_table = document.getElementById("broadcast_table").querySelector('tbody');

        // fetch broadcast
        $.ajax({
            // url: `server/fetch_broadcast?fetch_broadcast=1&&search=${search==null || search ==undefined?'':search}&&sort_by=${sortBy}&&filter_type=${filter_type}&&start_date=${start_date}&&end_date=${end_date}`,
            url: `server/broadcast?fetch_broadcast=1&&search=${search==null || search ==undefined?'':search}&&sort_by=${sortBy}&&filter_type=${filter_type}&&start_date=${start_date}&&end_date=${end_date}`,
            method: "GET",
            beforeSend: function() {
                broadcast_table.innerHTML = "";
                for (let i = 0; i < 4; i++) {
                    broadcast_table.insertAdjacentHTML('beforeend', get_shimmer());
                }
            },
            success: function(res) {
                setTimeout(() => {
                    if (res && Array.isArray(res.data)) {
                        broadcast_data = res.data;
                        // console.log(res);
                        broadcast_table_data = broadcast_data;

                        let set_marker = true;
                        broadcast_table.innerHTML = "";
                        broadcast_data.forEach((b_row, idx) => { //broadcast row
                            broadcast_table.insertAdjacentHTML('beforeend', get_new_broadcast_row(b_row.broadcast_name, b_row.Total_recipients, b_row.scheduled_at, set_marker));
                            set_marker = false;
                        })
                    }
                }, 1000)
            },
            error: function(xhr, status, error) {
                console.log("Failed to fetch broadcast...");
                console.log(xhr.responseText);
                console.log(error);
            },
            complete: function() {
                const refresh_btn = document.querySelector('.refresh-btn');
                refresh_btn.disabled = false;
            }
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        load_broadcasts();

        const search_broadcast = document.getElementById("search_broadcast");
        const search_broadcast_icon = document.getElementById("search_broadcast_icon");
        const sorted_by = document.querySelector('.sorted-by');
        const broadcast_table = document.getElementById("broadcast_table").querySelector('tbody');
        const broadcast_date_filter = document.getElementById("broadcast_date_filter");
        const start_date = document.getElementById("start_date");
        const end_date = document.getElementById("end_date");

        search_broadcast.addEventListener('keydown', (e) => {
            if (e.key == "Enter") {
                load_broadcasts(e.target.value, sorted_by.value, broadcast_date_filter.value, start_date.value, end_date.value);
            }
        });

        search_broadcast_icon.addEventListener('click', (e) => {
            const search_value = search_broadcast.value;

            load_broadcasts(search_value, sorted_by.value, broadcast_date_filter.value, start_date.value, end_date.value);
        });

        sorted_by.addEventListener('change', (e) => {
            if (e.target.value === "created-date") {
                load_broadcasts(search_broadcast.value, 'created-date', broadcast_date_filter.value, start_date.value, end_date.value);
            } else { //when sorted by is selected to Latest.
                load_broadcasts(search_broadcast.value, 'latest', broadcast_date_filter.value, start_date.value, end_date.value);
            }
        });


        broadcast_date_filter.addEventListener('change', (e) => {
            const filter_type = e.target.value;
            let start_date = document.getElementById("start_date");
            let end_date = document.getElementById("end_date");

            if (!filter_type) {
                console.log("Missing field: filter_type");
                return;
            } else if (!start_date) {
                console.log("Missing field: start_date");
                return;
            } else if (!end_date) {
                console.log("Missing field: end_date");
                return;
            }

            if (filter_type == "today") {
                start_date.value = new Date().toISOString().split('T')[0];
                end_date.value = new Date().toISOString().split('T')[0];
                load_broadcasts(search_broadcast.value, sorted_by.value, filter_type, start_date.value, end_date.value);
            } else if (filter_type == "yesterday") {
                const yesterday = new Date();
                yesterday.setDate(yesterday.getDate() - 1);

                const formatted = yesterday.toISOString().split('T')[0]; // format as yyyy-mm-dd

                start_date.value = formatted;
                end_date.value = formatted;
                load_broadcasts(search_broadcast.value, sorted_by.value, filter_type, start_date.value, end_date.value);
            } else if (filter_type == "last_7_days") {
                const last_7 = new Date();
                last_7.setDate(last_7.getDate() - 7);

                const formatted = last_7.toISOString().split('T')[0]; // format as yyyy-mm-dd
                start_date.value = formatted;
                load_broadcasts(search_broadcast.value, sorted_by.value, filter_type, start_date.value, last_7);
            } else if (filter_type == "last_30_days") { //last 30 days
                const last_30 = new Date();
                last_30.setDate(last_30.getDate() - 30);

                const formatted = last_30.toISOString().split('T')[0]; // format as yyyy-mm-dd
                start_date.value = formatted;
                load_broadcasts(search_broadcast.value, sorted_by.value, filter_type, start_date.value, last_30);
            }
        });

        const filter_start_date = document.getElementById("start_date");
        const filter_end_date = document.getElementById("end_date");

        function updateFilterType() {
            const startDate = filter_start_date.value;
            const endDate = filter_end_date.value;

            if (!startDate || !endDate) return;

            const todayStr = new Date().toISOString().slice(0, 10);

            const start = new Date(startDate);
            const end = new Date(endDate);

            // Format date strings for clean comparison
            const startStr = start.toISOString().slice(0, 10);
            const endStr = end.toISOString().slice(0, 10);

            const now = new Date();
            const yesterday = new Date(now);
            yesterday.setDate(now.getDate() - 1);
            const yesterdayStr = yesterday.toISOString().slice(0, 10);

            const last7 = new Date(now);
            last7.setDate(now.getDate() - 6); // includes today
            const last7Str = last7.toISOString().slice(0, 10);

            const last30 = new Date(now);
            last30.setDate(now.getDate() - 29); // includes today
            const last30Str = last30.toISOString().slice(0, 10);

            if (startStr === endStr && startStr === todayStr) {
                broadcast_date_filter.value = "today";
            } else if (startStr === endStr && startStr === yesterdayStr) {
                broadcast_date_filter.value = "yesterday";
            } else if (startStr === last7Str && endStr === todayStr) {
                broadcast_date_filter.value = "last_7_days";
            } else if (startStr === last30Str && endStr === todayStr) {
                broadcast_date_filter.value = "last_30_days";
            } else {
                broadcast_date_filter.value = "custom_range";
            }
            load_broadcasts(search_broadcast.value, sorted_by.value, broadcast_date_filter.value, startDate, endDate);
        }


        filter_start_date.addEventListener('change', updateFilterType);
        filter_end_date.addEventListener('change', updateFilterType);

        const refresh_btn = document.querySelector('.refresh-btn');

        refresh_btn.addEventListener('click', (e) => {
            e.currentTarget.disabled = true;
            refresh_btn.classList.add('rotated');
            load_broadcasts(search_broadcast.value, sorted_by.value, broadcast_date_filter.value, start_date.value, end_date.value);
            setTimeout(() => {
                refresh_btn.classList.remove('rotated');
            }, 510);
        });

        // export all broadcasts in csv
        const export_broadcast = document.getElementById('export-broadcast');
        const export_loading = document.getElementById("export-loading");

        export_broadcast.addEventListener('click', () => {
            if (broadcast_table_data.length === 0) {
                round_error_noti("Broadcast list is empty...");
                return;
            }

            export_loading.style.display = "flex";
            const progressBar = export_loading.querySelector('div:nth-child(2) > div');
            progressBar.style.width = "0%";

            const all_broadcast = broadcast_table_data.map(elm => elm.broadcast_id);

            // Pass broadcast_ids as URL parameter for SSE
            const broadcastIds = all_broadcast.join(',');
            const eventSource = new EventSource(`server/broadcast?export_broadcast=1&broadcast_ids=${encodeURIComponent(broadcastIds)}`);

            eventSource.onmessage = function(event) {
                try {
                    const data = JSON.parse(event.data);

                    if (data.error) {
                        export_loading.style.display = "none";
                        round_error_noti(data.error);
                        eventSource.close();
                        return;
                    }

                    if (data.progress !== undefined) {
                        progressBar.style.width = data.progress + "%";
                        // console.log(`Progress: ${data.progress}%`);
                    }

                    if (data.complete && data.csv_data) {
                        // Download the CSV
                        const blob = new Blob([data.csv_data], {
                            type: 'text/csv'
                        });
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = 'broadcast_schedule.csv';
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(url);

                        export_loading.style.display = "none";
                        round_success_noti("CSV exported successfully!");
                        eventSource.close();
                    }
                } catch (e) {
                    console.error('Error parsing SSE data:', e);
                }
            };

            eventSource.onerror = function(event) {
                export_loading.style.display = "none";
                round_error_noti("Connection error during export.");
                eventSource.close();
            };

            // Timeout handling
            setTimeout(() => {
                if (eventSource.readyState !== EventSource.CLOSED) {
                    eventSource.close();
                    export_loading.style.display = "none";
                    round_error_noti("Export request timed out.");
                }
            }, 30000);
        });

    });
</script>

<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);

        // clear previous activities on all broadcast list section
        const add_new_broadcast = document.getElementById("addNewTemplate");
        const search_broadcast = document.getElementById("search_broadcast");
        const sorted_by = document.querySelector(".sorted-by");
        const broadcast_name = document.getElementById("simpleinput");

        add_new_broadcast.addEventListener('click', () => {
            search_broadcast.value = "";
            sorted_by.value = "latest";
            const b_val = `Untitled_${new Date().getDate()}${new Date().getMonth()+1}${new Date().getFullYear()}${new Date().getHours()}${new Date().getMinutes()}`;
            broadcast_name.value = b_val;
        });

        // clear previous activities on new broadcast section

        // const btn_to_broadcast_list = document.querySelector("#toggleBroadcast svg");//button to back on all broadcast list
        // const broadcast_name = document.getElementById("simpleinput");
        // const template_category = document.getElementById("templateCategory");
        // const contacts_table_main = document.getElementById("contacts_table_main");
        // const contact_search_input = document.getElementById("contactSearchInput");
        // const schedule_date = document.getElementById("scheduleDate");
        // const schedule_time = document.getElementById("scheduleTimeInput");
        // const selected_template = document.getElementById("preview-message-body-text");
        // const template_title_con = document.getElementById("broadcast-title-container");
        // const template_visit_web_btn_con = document.getElementById("preview-visit-website-container");
        // const template_copy_button_con = document.getElementById("copy-button-preview-container");
        // const template_quick_reply_button_con = document.getElementById("quick-reply-button-preview-container");
        // const template_footer = document.getElementById("preview-message-footer-text");
        // const filters_con = document.getElementById("filters-con");
        // const filter_options = document.getElementById("filter-options");
        // const new_filter_btn = document.querySelector(".new-filter-btn");
        // const broadcast_table = document.getElementById("broadcast_table").querySelector('tbody');

        // btn_to_broadcast_list.addEventListener('click',()=>{
        //     broadcast_name.value = "";
        //     template_category.value = "";
        //     contact_search_input.value = ""; //clear contact search input

        //     contacts_table_main.innerHTML = ""; //clear previous searched contacts
        //     contacts_table_main.innerHTML = reset_table(); 

        //     if(!dateTimeSection.classList.contains("d-none")){
        //         dateTimeSection.classList.add("d-none"); //Hide schedule time and date inputs
        //     }

        //     sendNow.checked = true; // reset send options
        //     schedule_date.value = "";
        //     schedule_time.value = "";

        //     //Clear selected template 
        //     selected_template.innerHTML = ""; 
        //     template_title_con.innerHTML = "";
        //     template_visit_web_btn_con.innerHTML = "";
        //     template_copy_button_con.innerHTML = "";
        //     template_quick_reply_button_con.innerHTML = "";
        //     template_footer.innerHTML = "";

        //     // clear all applied filters
        //     filters_con.innerHTML = "";
        //     filter_options.classList.add("d-none");
        //     new_filter_btn.style.display = "none";
        //     allFilters=[];

        //     // Load all broadcasts again.
        //     broadcast_table.innerHTML = "";
        //     load_broadcasts();
        // });

    });
</script>


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