@extends("layouts.main")


@section("content")
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="https://kit.fontawesome.com/afb132c979.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js">
</script>
<link rel="stylesheet" href="https://audienzes.com/css/main.css"/>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="/css/iconly/dist/css/style.css">
  <style>


            .campaign-header .data-cell.selected::after {
  content: '';
  margin-left: 5px; /* Space after text */
  display: inline-block; 
  border: 4px solid transparent; /* Basic triangle shape */
}

.campaign-header .data-cell.selected.sort-asc::after {
  border-bottom-color: #333; /* Color of downwards arrow */
}

.campaign-header .data-cell.selected.sort-desc::after { 
  border-top-color: #333; /* Color of upwards arrow*/
}



 .adsets-header .data-cell.selected::after {
  content: '';
  margin-left: 5px; /* Space after text */
  display: inline-block; 
  border: 4px solid transparent; /* Basic triangle shape */
}

.adsets-header .data-cell.selected.sort-asc::after {
  border-bottom-color: #333; /* Color of downwards arrow */
}

.adsets-header .data-cell.selected.sort-desc::after { 
  border-top-color: #333; /* Color of upwards arrow*/
}

 .interest-header .data-cell.selected::after {
  content: '';
  margin-left: 5px; /* Space after text */
  display: inline-block; 
  border: 4px solid transparent; /* Basic triangle shape */
}

.interest-header .data-cell.selected.sort-asc::after {
  border-bottom-color: #333; /* Color of downwards arrow */
}

.interest-header .data-cell.selected.sort-desc::after { 
  border-top-color: #333; /* Color of upwards arrow*/
}

.adsets-header{
    padding:5px;
}

    #campaigns-container{
        background-color: white;
    border-radius: 10px;
    /*padding: 10px;*/
    box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
    }
    .adsets-container{
        background-color:rgba(37,40,105,0.05);
    }

    .interests-container{
       background-color:rgba(37,40,105,0.05);
    }

    .sub-data-container {
    /* Add borders, spacing, etc.  if needed */
    }

    .data-row{
        /*padding:5px;*/
        line-height:34px;
    }

    .data-cell {
        flex: 1; /* Make cells distribute space */
        padding: 5px; 
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap; 
    }

     .campaign-container {
            width: 100%; 
            padding:10px;
        }

        .campaign-row, .campaign-header {
            /*padding-top:10px;*/
            /*border-bottom: 1px solid #ddd;*/ /* Optional border */
        }
        .campaign-header, .data-header{
            font-weight:bold;
        }

        .data-cell {
            flex: 1; 
            padding: 8px;
        }

        .selected-campaign{
            background-color: #e4fcd5;
            margin-left:0;
        }
        .selected-campaign div:first-child{
            margin-left: -15px;
        }

        .data-row .col-2{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .data-loader{
            margin:20px;
        }
        .headline {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
        }


  </style>
    <div class="container">
      <div class="mx-auto font-bold mb-4 p-6 headline text-4xl" >Campaign Dashboard</div>
      <div id="campaigns-container">
        <div id="data-loader" class="data-loader" style="width:100%;text-align:center;line-height:250px;"><img src="/images/da_logo_anim.svg" style="width:40px;"></div>
        </div>
   </div>

    <script >
    let sortAscending = true; 
      const adAccountId = "{{$adAccountId}}";
      $(document).ready(function() {
        loadCampaigns(adAccountId);  // Initial load

    // Campaign Click
    $('#campaigns-container').on('click', '.campaign-row', function() {
      console.log("Click");
        $(".selected-campaign").removeClass("selected-campaign");
        const campaignId = $(this).data('campaign-id'); 
        $(this).addClass("selected-campaign");
        console.log(campaignId);
        loadAdSets(campaignId, $(this)); // 'this' is the clicked row
    });

    // Ad Set Click
     $('#campaigns-container').on('click', '.adset-row', function() {
         const adSetId = $(this).data('ad-set-id'); 
         loadInterests(adSetId, $(this));
     });

     


  // ... functions to handle loading (see below) ... 
});



function loadCampaigns(adAccountId) {
    $.ajax({
        url: `/campaigns/campaigns?ad_account_ids=${adAccountId}`,  // Your route
        success: function(response) {
            $('#campaigns-container').html(response); // Renders campaigns view
            // Assuming elements with 'data-cell' and 'campaign-header' as shown earlier
            const campaignContainer = document.querySelector('.campaign-container');
            const headerCells = document.querySelectorAll('.campaign-header .data-cell');
            sortCampaigns(campaignContainer, "cpc", sortAscending);
            headerCells.forEach(cell => {
              cell.addEventListener('click', () => {
                    const sortMetric = cell.dataset.metric;
                    sortCampaigns(campaignContainer, sortMetric, sortAscending);
                    sortAscending = !sortAscending; // Flip the sort order

                     // Remove previous 'selected'
                      const previouslySelected = document.querySelector('.campaign-header .data-cell.selected');
                      if (previouslySelected) {
                        previouslySelected.classList.remove('selected', 'sort-asc', 'sort-desc');
                      }

                      // Add 'selected' and direction class
                      cell.classList.add('selected');
                      cell.classList.add(sortAscending ? 'sort-asc' : 'sort-desc');

                    });
                });



            function sortCampaigns(container, sortMetric) {
                $('.adsets-container, .interests-container').remove(); 
                const campaigns = Array.from(container.querySelectorAll('.campaign-row'));
                // Ascending vs. Descending
                if (sortAscending) {
                    campaigns.sort((a, b) => { 
                        const valA = a.querySelector(`[data-metric="${sortMetric}"]`).textContent;
                        const valB = b.querySelector(`[data-metric="${sortMetric}"]`).textContent;

                        // Type-Aware Comparison
                        if (sortMetric === 'impressions' || sortMetric === 'spend' || sortMetric === 'clicks' || sortMetric === 'cpm' || sortMetric === 'ctr' || sortMetric === 'cpc' || sortMetric === 'reach') { 
                            return parseFloat(valA) - parseFloat(valB); // Compare as numbers
                        } else {
                            return valA.localeCompare(valB); // Default to string comparison
                        } 
                    });
                } else {
                    campaigns.sort((a, b) => { 
                        const valA = a.querySelector(`[data-metric="${sortMetric}"]`).textContent;
                        const valB = b.querySelector(`[data-metric="${sortMetric}"]`).textContent;

                        // Type-Aware Comparison
                         if (sortMetric === 'impressions' || sortMetric === 'spend' || sortMetric === 'clicks' || sortMetric === 'cpm' || sortMetric === 'ctr' || sortMetric === 'cpc' || sortMetric === 'reach') { 
                            return parseFloat(valB) - parseFloat(valA); // Compare as numbers
                        } else {
                            return valA.localeCompare(valB); // Default to string comparison
                        } 
                    });
                }
                campaigns.forEach(campaign => container.appendChild(campaign));
            }


    
            
          
        }
    });
}

function loadAdSets(campaignId, parentRow) {
    $('.adsets-container, .interests-container').remove(); 
    $('<div><div id="data-loader" class="data-loader" style="width:100%;text-align:center;line-height:250px;"><img src="/images/da_logo_anim.svg" style="width:40px;"></div></div>').insertAfter(parentRow).addClass('adsets-container'); 
    $.ajax({
        url: `/campaigns/adsets/${campaignId}`,
        success: function(response) {
            // Remove any existing adsets or interests views
            

            // Ad Sets Sorting
            const adsetsContainer = document.querySelector('.adsets-container'); // Update
            const adsetHeaderCells = document.querySelectorAll('.adsets-header .data-cell'); // Update

            $(".adsets-container").html(response);
            adsetHeaderCells.forEach(cell => {
              cell.addEventListener('click', () => {
                const sortMetric = cell.dataset.metric;
                sortAdSets(adsetsContainer, sortMetric, sortAscending); // Modify function name
                sortAscending = !sortAscending; 

                // Remove previous 'selected'
                  const previouslySelected = document.querySelector('.adsets-header .data-cell.selected');
                  if (previouslySelected) {
                    previouslySelected.classList.remove('selected', 'sort-asc', 'sort-desc');
                  }

                  // Add 'selected' and direction class
                  cell.classList.add('selected');
                  cell.classList.add(sortAscending ? 'sort-asc' : 'sort-desc');
              });
            });

            // Modify the Function for Ad Sets
            function sortAdSets(container, sortMetric) {
                // Remove interests (not ad sets)
                $('.interests-container').remove(); 

                const adSets = Array.from(container.querySelectorAll('.data-row')); // Assuming class for ad set rows

                if (sortAscending) {
                    adSets.sort((a, b) => {
                        const valA = a.querySelector(`[data-metric="${sortMetric}"]`).textContent;
                        const valB = b.querySelector(`[data-metric="${sortMetric}"]`).textContent;

                        // Type-Aware Comparison (Assuming you have the 'roundMetric' function)
                        if (sortMetric === 'impressions' || sortMetric === 'spend' /* ... rest of numeric metrics */) {
                            return parseFloat(valA) - parseFloat(valB); // Numbers
                        } else {
                            return valA.localeCompare(valB); // Strings
                        }
                    });
                } else { // descending (no changes from your earlier code) 
                    adSets.sort((a, b) => {
                        const valA = a.querySelector(`[data-metric="${sortMetric}"]`).textContent;
                        const valB = b.querySelector(`[data-metric="${sortMetric}"]`).textContent;

                        // Type-Aware Comparison 
                        if (sortMetric === 'impressions' || sortMetric === 'spend' || sortMetric === 'clicks' || sortMetric === 'cpm' || sortMetric === 'ctr' || sortMetric === 'cpc' || sortMetric === 'reach') { 
                            return parseFloat(valB) - parseFloat(valA); 
                        } else {
                            return valA.localeCompare(valB); 
                        }
                    });
                }

                adSets.forEach(adSet => container.appendChild(adSet)); 
            } 
        }
    });
}

function loadInterests(adSetId, parentRow) {
     $('.interests-container').remove(); 
    $('<div><div id="data-loader" class="data-loader" style="width:100%;text-align:center;line-height:250px;"><img src="/images/da_logo_anim.svg" style="width:40px;"></div></div>').insertAfter(parentRow).addClass('interests-container'); 
    $.ajax({
        url: `/campaigns/interests/${adSetId}`, // Assuming suitable route
        success: function(response) {
            // Remove any existing interests for this ad set
            //$('.interests-container').remove(); 
            //$(response).insertAfter(parentRow).addClass('interests-container'); 
            $(".interests-container").html(response);

            // Interest Sorting
            const interestContainer = document.querySelector('.interests-container'); // Update
            const interestHeaderCells = document.querySelectorAll('.interest-header .data-cell'); // Update

            interestHeaderCells.forEach(cell => {
              cell.addEventListener('click', () => {
                const sortMetric = cell.dataset.metric;
                sortInterests(interestContainer, sortMetric, sortAscending); // Modify function name
                sortAscending = !sortAscending; 

                // Remove previous 'selected'
                  const previouslySelected = document.querySelector('.interest-header .data-cell.selected');
                  if (previouslySelected) {
                    previouslySelected.classList.remove('selected', 'sort-asc', 'sort-desc');
                  }

                  // Add 'selected' and direction class
                  cell.classList.add('selected');
                  cell.classList.add(sortAscending ? 'sort-asc' : 'sort-desc');
              });
            });

            // Modify the Function for Ad Sets
            function sortInterests(container, sortMetric) {
               

                const adSets = Array.from(container.querySelectorAll('.data-row')); // Assuming class for ad set rows

                if (sortAscending) {
                    adSets.sort((a, b) => {
                        const valA = a.querySelector(`[data-metric="${sortMetric}"]`).textContent;
                        const valB = b.querySelector(`[data-metric="${sortMetric}"]`).textContent;

                        // Type-Aware Comparison (Assuming you have the 'roundMetric' function)
                        if (sortMetric === 'impressions' || sortMetric === 'spend' /* ... rest of numeric metrics */) {
                            return parseFloat(valA) - parseFloat(valB); // Numbers
                        } else {
                            return valA.localeCompare(valB); // Strings
                        }
                    });
                } else { // descending (no changes from your earlier code) 
                    adSets.sort((a, b) => {
                        const valA = a.querySelector(`[data-metric="${sortMetric}"]`).textContent;
                        const valB = b.querySelector(`[data-metric="${sortMetric}"]`).textContent;

                        // Type-Aware Comparison 
                        if (sortMetric === 'impressions' || sortMetric === 'spend' || sortMetric === 'clicks' || sortMetric === 'cpm' || sortMetric === 'ctr' || sortMetric === 'cpc' || sortMetric === 'reach') { 
                            return parseFloat(valB) - parseFloat(valA); 
                        } else {
                            return valA.localeCompare(valB); 
                        }
                    });
                }

                adSets.forEach(adSet => container.appendChild(adSet)); 
            } 
        },
        error: function() {
            // Optional: Handle errors if fetching interests fails
            console.error("Failed to load interests"); 
        }
    });
}




    </script> 
@endsection