/*!
* Start Bootstrap - Freelancer v7.0.7 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
//
// Scripts
// 

window.addEventListener('DOMContentLoaded', event => {

    // Navbar shrink function
    var navbarShrink = function () {
        const navbarCollapsible = document.body.querySelector('#mainNav');
        if (!navbarCollapsible) {
            return;
        }
        if (window.scrollY === 0) {
            navbarCollapsible.classList.remove('navbar-shrink')
        } else {
            navbarCollapsible.classList.add('navbar-shrink')
        }

    };

    // Shrink the navbar 
    navbarShrink();

    // Shrink the navbar when page is scrolled
    document.addEventListener('scroll', navbarShrink);

    // Activate Bootstrap scrollspy on the main nav element
    const mainNav = document.body.querySelector('#mainNav');
    if (mainNav) {
        new bootstrap.ScrollSpy(document.body, {
            target: '#mainNav',
            rootMargin: '0px 0px -40%',
        });
    };

    // Collapse responsive navbar when toggler is visible
    const navbarToggler = document.body.querySelector('.navbar-toggler');
    const responsiveNavItems = [].slice.call(
        document.querySelectorAll('#navbarResponsive .nav-link')
    );
    responsiveNavItems.map(function (responsiveNavItem) {
        responsiveNavItem.addEventListener('click', () => {
            if (window.getComputedStyle(navbarToggler).display !== 'none') {
                navbarToggler.click();
            }
        });
    });

});

// $(document).ready(function () {
//     $('#screenshotbtn').on('click', function () {
//         const url = '/api/take-screenshot/';

//         $.ajax({
//             url: url,
//             type: 'POST',
//             data: {},  // no data to send
//             contentType: 'application/json',
//             dataType: 'json',  // expect JSON response
//             success: function (res) {
//                 if (res.image_url && res.image_url.includes('walmart')) {
//                     $("#crop_container1 img").attr("src", res.image_url + '?t=' + new Date().getTime());
//                 } else if (res.image_url && res.image_url.includes('amazon')) {
//                     $("#crop_container2 img").attr("src", res.image_url + '?t=' + new Date().getTime());
//                 } else if (res.image_url && res.image_url.includes('target')) {
//                     $("#crop_container3 img").attr("src", res.image_url + '?t=' + new Date().getTime());
//                 } else if (res.image_url && res.image_url.includes('bestbuy')) {
//                     $("#crop_container4 img").attr("src", res.image_url + '?t=' + new Date().getTime());
//                 } else {
//                     alert("No image found");
//                 }
//             },
//             error: function (xhr) {
//                 console.error("Error:", xhr.responseText);
//                 alert("Error: " + xhr.responseText);
//             }
//         });
//     });
// });


$(document).ready(function () {
    $('#screenshotbtn').on('click', function () {
        const urls = [
            'walmart', 
            'amazon',
            'target',
            'bestbuy'
            ];

        // function to call Django API one by one
        function processNext(index) {
            if (index >= urls.length) return; // stop when done

            $.ajax({
                url: '/api/take-screenshot/',
                type: 'POST',
                data: JSON.stringify({ site: urls[index] }), // optional if you want to send current site name
                contentType: 'application/json',
                dataType: 'json',
                success: function (res) {
                    const ts = '?t=' + new Date().getTime();
                    if (res.image_url && res.image_url.includes('walmart')) {
                        $("#crop_container1 img").attr("src", res.image_url + ts);
                    } else if (res.image_url && res.image_url.includes('amazon')) {
                        console.log("hereeeeee", res.carousel_img1)
                        $("#crop_container2 img").attr("src", res.image_url + ts);
                        $('#crop_container5 img').attr("src", res.image_url + ts);
                        $('#crop_container13 img').attr("src", res.image_url + ts);
                        $('#crop_container16 img').attr("src", res.image_url + ts);
                        $('#crop_container19 img').attr("src", res.best_seller_img1 + ts);
                        $('#crop_container22 img').attr("src", res.best_seller_img2 + ts);
                        $('#upload_container1 img').eq(0).attr("src", res.carousel_img1 + ts);
                        $('#upload_container1 img').eq(1).attr("src", res.carousel_img2 + ts);
                        $('#upload_container1 img').eq(2).attr("src", res.carousel_img3 + ts);
                        $('#amazonCarosalLink .editable-link').attr("href", res.carousel_link1).text(res.carousel_name1);
                        // here the best seller content taxt should be laces in a li elements for the id amazonEditableBestSellerContent
                        try {
                            const bestSellers = JSON.parse(res.best_seller_content1);
                            let listHtml = '<ul class="editable-list">';
                            console.log(bestSellers)
                            for (const section in bestSellers) {
                                console.log("section", section)
                                const items = bestSellers[section];
                                console.log("item", typeof(items))
                                // listHtml += `<h5>${section}</h5><ul class="editable-list">`;
                                // items.forEach(item => {
                                listHtml += `<li contenteditable="true">${items}</li>`;
                                // });
                            }
                            listHtml += `</ul>`;

                            // replace only the content section without breaking other editable tools
                            const $content = $('#amazonEditableBestSellerContent');
                            $content.find('.editable-list, h5').remove();  // remove old lists and headers
                            console.log(listHtml)
                            $content.prepend(listHtml);                     // append new HTML
                        } catch (e) {
                            console.error("Error parsing best seller content:", e);
                        }

                        try {
                            const bestSellers = JSON.parse(res.best_seller_content2);
                            let listHtml = '<ul class="editable-list">';
                            console.log(bestSellers)
                            for (const section in bestSellers) {
                                console.log("section", section)
                                const items = bestSellers[section];
                                console.log("item", typeof(items))
                                // listHtml += `<h5>${section}</h5><ul class="editable-list">`;
                                // items.forEach(item => {
                                listHtml += `<li contenteditable="true">${items}</li>`;
                                // });
                            }
                            listHtml += `</ul>`;

                            // replace only the content section without breaking other editable tools
                            const $content = $('#amazonEditableBestSellerContent1');
                            $content.find('.editable-list, h5').remove();  // remove old lists and headers
                            console.log(listHtml)
                            $content.prepend(listHtml);                     // append new HTML
                        } catch (e) {
                            console.error("Error parsing best seller content:", e);
                        }
                        // $('#upload_container1 img').attr("src", res.carousel_img1)
                        // $('#amazonCarosalLink a').attr("href", res.carousel_link1)
                        // $('#amazonCarosalLink a').text(res.carousel_name1)
                    } else if (res.image_url && res.image_url.includes('target')) {
                        $("#crop_container3 img").attr("src", res.image_url + ts);
                        $("#crop_container6 img").attr("src", res.image_url + ts);
                        $("#crop_container11 img").attr("src", res.image_url + ts);
                        $("#crop_container14 img").attr("src", res.image_url + ts);
                        $("#crop_container17 img").attr("src", res.image_url + ts);
                        $("#crop_container20 img").attr("src", res.image_url + ts);
                        $("#crop_container23 img").attr("src", res.image_url + ts);
                    } else if (res.image_url && res.image_url.includes('bestbuy')) {
                        $("#crop_container4 img").attr("src", res.image_url + ts);
                        $("#crop_container7 img").attr("src", res.image_url + ts);
                        $("#crop_container15 img").attr("src", res.image_url + ts);
                        $("#crop_container18 img").attr("src", res.image_url + ts);
                        $("#crop_container12 img").attr("src", res.first_section + ts);
                        $('#amazonCarosalLink1 .editable-link').attr("href", res.first_section_url).text(res.first_section_title);
                        $("#crop_container21 img").attr("src", res.best_seller_img1 + ts);
                        $("#crop_container24 img").attr("src", res.best_seller_img2 + ts);
                        try {
                            const bestSellers = JSON.parse(res.best_seller_content1);
                            let listHtml = '<ul class="editable-list">';
                            console.log(bestSellers)
                            for (const section in bestSellers) {
                                console.log("section", section)
                                const items = bestSellers[section];
                                console.log("item", typeof(items))
                                // listHtml += `<h5>${section}</h5><ul class="editable-list">`;
                                // items.forEach(item => {
                                listHtml += `<li contenteditable="true">${items}</li>`;
                                // });
                            }
                            listHtml += `</ul>`;

                            // replace only the content section without breaking other editable tools
                            const $content = $('#amazonEditableBestSellerContent2');
                            $content.find('.editable-list, h5').remove();  // remove old lists and headers
                            console.log(listHtml)
                            $content.prepend(listHtml);                     // append new HTML
                        } catch (e) {
                            console.error("Error parsing best seller content:", e);
                        }


                        try {
                            const bestSellers = JSON.parse(res.best_seller_content2);
                            let listHtml = '<ul class="editable-list">';
                            console.log(bestSellers)
                            for (const section in bestSellers) {
                                console.log("section", section)
                                const items = bestSellers[section];
                                console.log("item", typeof(items))
                                // listHtml += `<h5>${section}</h5><ul class="editable-list">`;
                                // items.forEach(item => {
                                listHtml += `<li contenteditable="true">${items}</li>`;
                                // });
                            }
                            listHtml += `</ul>`;

                            // replace only the content section without breaking other editable tools
                            const $content = $('#amazonEditableBestSellerContent3');
                            $content.find('.editable-list, h5').remove();  // remove old lists and headers
                            console.log(listHtml)
                            $content.prepend(listHtml);                     // append new HTML
                        } catch (e) {
                            console.error("Error parsing best seller content:", e);
                        }

                    }

                    // process the next one
                    processNext(index + 1);
                },
                error: function (xhr) {
                    console.error("Error:", xhr.responseText);
                    processNext(index + 1); // continue even if one fails
                }
            });
        }

        // start with the first URL
        processNext(0);
    });
});