<div class="content" id="createBroadcast">

    <!-- Start Content-->
    <div class="container-fluid d-none" id="anotherSection">
        <div class="pt-3 d-flex align-items-sm-center flex-sm-row flex-column">
            <div class="flex-grow-1" id="toggleBroadcast">
                <h4 class="fs-18 fw-semibold m-0">
                    <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="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"></path>
                    </svg>
                    New Broadcast
                </h4>
            </div>
            <div>
                <button class="btn btn-outline-success me-2">Add Broadcast</button>
                <button class="btn btn-danger me-2">Discard</button>

            </div>

        </div>
        <div class="pb-2">
            <div class="row">
                <div class="col-xl-9 newTemplateForm">
                    <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 style="background-color: white;" class="rounded-2 px-1 my-2 py-2">
                                <p class="m-0 fw-bold">What message do you want to send?</p>
                                <p class="m-0">Add broadcast name and template below</p>
                            </div>
                            <form action="">
                                <div>
                                    <div>
                                        <div class="mb-3">
                                            <label for="simpleinput" class="form-label fw-bold">Broadcast Name</label>
                                            <input type="text" id="simpleinput" class="form-control inputbgcolor" placeholder="Broadcast Name">
                                        </div>
                                    </div>
                                    <div>
                                        <div class="mb-3">
                                            <div class="d-flex justify-content-between">
                                                <div><label for="simpleinput" class="form-label fw-bold">Select template message</label></div>
                                                <div>
                                                    <a href="https://app.watify.io/my-templates?my-template=yes">+Add new template</a>
                                                </div>
                                            </div>
                                            <select class="form-select inputbgcolor" name="" id="templateCategory">
                                                <option value="">Select Category</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <h6 class="mb-1">Who do you want to send it to ?</h6>
                                                <p>
                                                    Select contacts below or
                                                    <a href="#" onclick="downloadFile()">Download sample format for contact upload</a>
                                                </p>
                                            </div>
                                            <div>
                                                <button class="btn btn-outline-success me-2">Import contacts</button>
                                            </div>
                                        </div>
                                        <!-- accordian start -->
                                        <div class="accordion" id="accordionExample">
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="headingOne">
                                                    <button class="accordion-button fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                        Exclude invalid contacts
                                                    </button>
                                                </h2>
                                                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center my-4">
                                            <div class="input-group" style="width: 500px;">
                                                <input type="text" class="form-control" placeholder="Search...">
                                                <span class="input-group-text">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                                        style="fill: rgba(13, 13, 13, 0.62);">
                                                        <path
                                                            d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z">
                                                        </path>
                                                    </svg>
                                                </span>
                                            </div>
                                            <button class="btn btn-success rounded-1 border-0 d-flex align-items-center justify-content-center"
                                                style="padding: 8px 12px; margin-left: 5px;">
                                                <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 class="d-flex justify-content-between">
                                            <div>
                                                <p>selected: <span style="color:green">0/94805 contacts remaining</span></p>
                                            </div>
                                            <div>
                                                <p class="fw-bold">current limits: 100000 unique contacts/24hours</p>
                                            </div>
                                        </div>
                                        <div class="progress mt-2" style="background-color: rgba(0, 0, 0, 0.1);">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                0%
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr />
                                <!-- table start -->
                                <div class="mt-4">
                                    <table class="table table-bordered">
                                        <thead class="table-light">
                                            <tr>
                                                <th><input type="checkbox" id="selectAll"></th>
                                                <th>Name</th>
                                                <th>Phone</th>
                                                <th>Allow Broadcast</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="checkbox" class="rowCheckbox"></td>
                                                <td>John Doe</td>
                                                <td>+1 234 567 890</td>
                                                <td class="broadcast-status">False</td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" class="rowCheckbox"></td>
                                                <td>Jane Smith</td>
                                                <td>+1 987 654 321</td>
                                                <td class="broadcast-status">False</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </form>
                            <div class="d-flex justify-content-between mt-5">
                                <div>
                                    <div class="d-flex align-items-center">
                                        <h4 class="m-0">Enable ROI Tracking</h4>
                                        <div class="d-flex align-items-center rounded-3 ms-2 py-0 px-2" style="background-color: #ff69b4; width: fit-content; height: 20px;">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" style="fill: #ffffff;">
                                                <path d="M11.219 3.375 8 7.399 4.781 3.375A1.002 1.002 0 0 0 3 4v15c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V4a1.002 1.002 0 0 0-1.781-.625L16 7.399l-3.219-4.024c-.381-.474-1.181-.474-1.562 0zM5 19v-2h14.001v2H5zm10.219-9.375c.381.475 1.182.475 1.563 0L19 6.851 19.001 15H5V6.851l2.219 2.774c.381.475 1.182.475 1.563 0L12 5.601l3.219 4.024z"></path>
                                            </svg>
                                            <span class="ms-1 text-white fw-semibold" style="font-size: 12px;">Business Feature</span>
                                        </div>
                                    </div>
                                    <p>Enable this feature to uncover user engagement, track conversion and optimize your broadcast</p>
                                </div>
                                <div>
                                    <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>
                            </div>
                            <div class="p-3 border rounded my-2">
                                <h6 class="fw-semibold">When do you want to send it?</h6>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="sendOption" id="sendNow" checked>
                                    <label class="form-check-label" for="sendNow">
                                        Send Now
                                    </label>
                                </div>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="radio" name="sendOption" id="scheduleTime">
                                    <label class="form-check-label" for="scheduleTime">
                                        Schedule for Specific Time
                                    </label>
                                </div>

                                <!-- Hidden Date & Time Section -->
                                <div id="dateTimeSection" class="mt-3 d-none">
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label for="scheduleDate" class="form-label fw-semibold">Select Date</label>
                                            <input type="date" class="form-control" id="scheduleDate">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="scheduleTimeInput" class="form-label fw-semibold">Select Time</label>
                                            <input type="time" class="form-control" id="scheduleTimeInput">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-xl-3">
                    <div class="d-flex flex-column align-items-center">
                        <div class="mt-3">
                            <h5 class="text-center">Preview</h5>
                        </div>
                        <div style="background-image: url(https://live.wati.io/assets/preview_phone_bg-DgrnAayw.png);background-repeat: no-repeat;background-position: center center;background-size: contain;width: 306px;height: 570px;">
                            <div class="preview-message" style="max-height: 416px;overflow: auto;margin: 87px 20px 0px 18px;padding-bottom: 20px;">
                                <div class="preview-message-container">
                                    <div id="broadcast-title-container">

                                    </div>

                                    <div class="text-dark" id="preview-message-body-text"></div>

                                    <div class="d-flex justify-content-between align-items-end" style="font-size: 12px;">
                                        <div id="preview-message-footer-text" style="max-width: 200px;overflow: hidden;direction: initial;text-align: initial;font-size:12px;"></div>
                                        <div class="fs-smaller">12:12</div>
                                    </div>

                                    <div class="text-dark" id="preview-message-footer-links-container">
                                        <div id="preview-visit-website-container"></div>
                                        <div id="copy-button-preview-container"></div>
                                        <div id="quick-reply-button-preview-container"></div>
                                        <!-- <div class="preview-message-footer my-2 link d-flex gap-2 align-items-center justify-content-center" style="cursor: pointer;">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" color="#276afd" fill="none">
                                                        <path d="M11.0991 3.00012C7.45013 3.00669 5.53932 3.09629 4.31817 4.31764C3.00034 5.63568 3.00034 7.75704 3.00034 11.9997C3.00034 16.2424 3.00034 18.3638 4.31817 19.6818C5.63599 20.9999 7.75701 20.9999 11.9991 20.9999C16.241 20.9999 18.3621 20.9999 19.6799 19.6818C20.901 18.4605 20.9906 16.5493 20.9972 12.8998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                        <path d="M20.556 3.49612L11.0487 13.0586M20.556 3.49612C20.062 3.00151 16.7343 3.04761 16.0308 3.05762M20.556 3.49612C21.05 3.99074 21.0039 7.32273 20.9939 8.02714" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                    <span class="" style="font-size: 0.8rem; color: #276afd;">Visit</span>
                                                </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- container-fluid -->
</div> <!-- content -->

<script>

</script>

<!-- fetch client template -->
<script>

    $(document).ready(function() {
        $.ajax({
            url: 'https://app.watify.io/server/fetch_template',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response && response.status === 'success' && response.data.length > 0) {
                    console.log('Data received:', response.data); // Debugging

                    let options = '<option value="">Select Category</option>'; // Default option

                    // Loop through each template and add to the dropdown
                    response.data.forEach(function(template) {
                        options += `<option value="${template.id}">${template.template_name}</option>`;
                    });

                    $('#templateCategory').html(options); // Populate the dropdown
                } else {
                    console.log('Error:', response ? response.message : 'No response');
                    $('#templateCategory').html('<option value="">No templates found</option>'); // Handle empty case
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', status, error);
                console.log('Response Text:', xhr.responseText); // Log raw response for debugging
            }
        });

    });
    // fetch template details
    $('#templateCategory').change(function() {
        let selectedTemplateId = $(this).val(); // Get selected template ID

        if (selectedTemplateId) {
            $.ajax({
                url: 'https://app.watify.io/server/fetch_template_details', // Update with correct endpoint
                type: 'GET',
                data: {
                    template_id: selectedTemplateId
                }, // Send template ID as parameter
                dataType: 'json',
                success: function(response) {
                    if (response && response.status === 'success') {
                        console.log('Selected Template Data:', response.data);

                        let templateBody = response.data.template_body || 'No content available';
                        let templateFooter = response.data.template_footer || 'Powered by Watify.io';
                        let templateType = response.data.template_type;
                        let templateCopyText = response.data.copy_text || '';
                        let templateBtns = response.data.template_buttons;

                        // ✅ Insert the template body inside the preview
                        $('#preview-message-body-text').html(templateBody);

                        // ✅ Insert the footer text in the designated footer section
                        $('#preview-message-footer-text').html(`<p>${templateFooter}</p>`);


                    } else {
                        console.log('Error:', response ? response.message : 'No response');

                        // Handle empty case
                        $('#preview-message-body-text').html('<p>No details found</p>');
                        $('#preview-message-footer-text').html('');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', status, error);
                    console.log('Response Text:', xhr.responseText);
                }
            });
        } else {
            // Clear preview if no template is selected
            $('#preview-message-body-text').html('');
            $('#preview-message-footer-text').html('');
        }
    });
</script>