adsPRO/templates/campaigns/main_view.php

<div class="campaigns-page">
  <div class="campaigns-header">
    <h2><i class="fa-solid fa-chart-line"></i> Kampanie</h2>
  </div>

  <div class="campaigns-filters">
    <div class="filter-group">
      <label for="client_id"><i class="fa-solid fa-building"></i> Klient</label>
      <select id="client_id" name="client_id" class="form-control">
        <option value="">- wybierz klienta -</option>
        <?php foreach ( $this -> clients as $client ): ?>
          <option value="<?= $client['id']; ?>"><?= htmlspecialchars( $client['name'] ); ?></option>
        <?php endforeach; ?>
      </select>
    </div>
    <div class="filter-group filter-group-campaign-multi">
      <label><i class="fa-solid fa-bullhorn"></i> Kampania</label>
      <div class="filter-with-action">
        <select id="campaign_id" name="campaign_id[]" multiple="multiple" style="display:none"></select>
        <div class="campaign-dropdown" id="campaign_dropdown">
          <div class="campaign-dropdown-trigger" id="campaign_dropdown_trigger">
            <span class="campaign-dropdown-text">- wybierz kampanie -</span>
            <i class="fa-solid fa-chevron-down campaign-dropdown-arrow"></i>
          </div>
          <div class="campaign-dropdown-menu" id="campaign_dropdown_menu"></div>
        </div>
        <button type="button" id="delete_campaign" class="btn-icon btn-icon-delete" title="Usun zaznaczone kampanie">
          <i class="fa-solid fa-trash"></i>
        </button>
      </div>
    </div>
  </div>

  <div class="campaigns-chart-wrap">
    <div id="container"></div>
  </div>

  <div class="campaigns-table-wrap">
    <div id="history_bulk_actions" style="display:none; margin-bottom: 10px;">
      <button type="button" id="delete_history_entries" class="btn btn-danger btn-sm">
        <i class="fa-solid fa-trash"></i> Usun zaznaczone (<span id="history_selected_count">0</span>)
      </button>
    </div>
    <table class="table" id="products">
      <thead>
        <tr>
          <th style="width: 30px; text-align: center;"><input type="checkbox" id="select_all_history"></th>
          <th>Data</th>
          <th>ROAS (30 dni)</th>
          <th>ROAS (all time)</th>
          <th>Wartosc konwersji (30 dni)</th>
          <th>Wydatki (30 dni)</th>
          <th>Komentarz</th>
          <th>Strategia ustalania stawek</th>
          <th>Budzet</th>
          <th style="width: 60px; text-align: center;">Akcje</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

<script type="text/javascript">
var STORAGE_CLIENT_KEY = 'campaigns.last_client_id';
var STORAGE_CAMPAIGN_KEY = 'campaigns.last_campaign_id';
var restore_campaign_after_client_load = '';

function storage_set( key, value )
{
  try
  {
    if ( value === null || value === undefined || value === '' )
      localStorage.removeItem( key );
    else
      localStorage.setItem( key, String( value ) );
  }
  catch ( e ) {}
}

function storage_get( key )
{
  try
  {
    return localStorage.getItem( key ) || '';
  }
  catch ( e )
  {
    return '';
  }
}

function rebuildCampaignDropdown()
{
  var menu = $( '#campaign_dropdown_menu' );
  menu.empty();

  $( '#campaign_id option' ).each( function()
  {
    var val = $( this ).val();
    var text = $( this ).text();
    var item = $( '<div class="campaign-dropdown-item"></div>' );
    var checkbox = $( '<input type="checkbox">' ).val( val );
    item.append( checkbox ).append( $( '<span></span>' ).text( text ) );
    menu.append( item );
  });

  updateCheckboxState();
  updateDropdownDisplay();
}

function syncDropdownToSelect()
{
  var selected = [];
  $( '#campaign_dropdown_menu input:checked' ).each( function() {
    selected.push( $( this ).val() );
  });
  $( '#campaign_id' ).val( selected ).trigger( 'change' );
  updateDropdownDisplay();
}

function updateCheckboxState()
{
  var selected = $( '#campaign_id' ).val() || [];
  $( '#campaign_dropdown_menu input[type="checkbox"]' ).each( function()
  {
    var checked = selected.indexOf( $( this ).val() ) !== -1;
    $( this ).prop( 'checked', checked );
    $( this ).closest( '.campaign-dropdown-item' ).toggleClass( 'is-checked', checked );
  });
}

function updateDropdownDisplay()
{
  var selected = $( '#campaign_id' ).val() || [];
  var textEl = $( '#campaign_dropdown .campaign-dropdown-text' );

  if ( selected.length === 0 )
  {
    textEl.text( '- wybierz kampanie -' ).addClass( 'is-placeholder' );
  }
  else if ( selected.length === 1 )
  {
    var name = $( '#campaign_id option[value="' + selected[0] + '"]' ).text();
    textEl.text( name ).removeClass( 'is-placeholder' );
  }
  else
  {
    var first = $( '#campaign_id option[value="' + selected[0] + '"]' ).text();
    textEl.text( first + ' (+' + ( selected.length - 1 ) + ')' ).removeClass( 'is-placeholder' );
  }
}

function reloadChart()
{
  var vals = $( '#campaign_id' ).val() || [];
  if ( vals.length !== 1 ) return;
  var campaign_id = vals[0];

  $.ajax({
    url: '/campaigns/get_campaign_history_data_table_chart/',
    method: 'POST',
    data: { campaign_id: campaign_id },
    success: function( response )
    {
      var parsedData = JSON.parse( response );
      var plotLines = [];

      parsedData.comments.forEach( function( comment ) {
        plotLines.push({
          color: '#333333',
          width: 1,
          value: parsedData.dates.indexOf( comment.date_add.split(' ')[0] ),
          dashStyle: 'Solid',
          label: {
            text: comment.comment,
            align: 'left',
            style: { color: '#333333', fontSize: '13px' }
          },
          zIndex: 5
        });
      });

      Highcharts.chart( 'container', {
        chart: {
          style: { fontFamily: '"Roboto", sans-serif' },
          backgroundColor: 'transparent'
        },
        title: { text: '' },
        subtitle: { text: '' },
        yAxis: {
          title: { text: '' },
          gridLineColor: '#E2E8F0'
        },
        xAxis: {
          categories: parsedData.dates,
          labels: {
            style: { fontSize: '12px', color: '#8899A6' },
            formatter: function() {
              var date = new Date( Date.parse( this.value ) );
              var day = date.getDate();
              var month = date.getMonth() + 1;
              var year = date.getFullYear();
              if ( day === 1 || this.isLast ) {
                return year + '-' + ( month < 10 ? '0' + month : month ) + '-' + ( day < 10 ? '0' + day : day );
              }
              return null;
            }
          },
          plotLines: plotLines
        },
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom',
          itemStyle: { fontSize: '13px', color: '#4E5E6A' }
        },
        plotOptions: {
          series: {
            label: { connectorAllowed: false },
            pointStart: 0
          }
        },
        colors: ['#6690F4', '#57B951', '#FF8C00', '#CC0000', '#8B5CF6'],
        series: parsedData.chart_data,
        tooltip: { style: { fontSize: '13px' } },
        credits: { enabled: false }
      });
    },
    error: function( jqXHR, textStatus, errorThrown ) {
      console.error( 'Error AJAX:', textStatus, errorThrown );
    }
  });
}

$( function()
{
  $( 'body' ).on( 'click', '#campaign_dropdown_trigger', function( e )
  {
    e.stopPropagation();
    $( '#campaign_dropdown' ).toggleClass( 'is-open' );
  });

  $( 'body' ).on( 'change', '#campaign_dropdown_menu input[type="checkbox"]', function()
  {
    $( this ).closest( '.campaign-dropdown-item' ).toggleClass( 'is-checked', this.checked );
    syncDropdownToSelect();
  });

  $( 'body' ).on( 'click', '#campaign_dropdown_menu .campaign-dropdown-item span', function( e )
  {
    e.preventDefault();
    e.stopPropagation();
    var val = $( this ).siblings( 'input[type="checkbox"]' ).val();
    $( '#campaign_dropdown_menu input[type="checkbox"]' ).prop( 'checked', false );
    $( '#campaign_dropdown_menu .campaign-dropdown-item' ).removeClass( 'is-checked' );
    $( this ).siblings( 'input[type="checkbox"]' ).prop( 'checked', true );
    $( this ).closest( '.campaign-dropdown-item' ).addClass( 'is-checked' );
    $( '#campaign_id' ).val( [ val ] ).trigger( 'change' );
    updateDropdownDisplay();
    $( '#campaign_dropdown' ).removeClass( 'is-open' );
  });

  $( document ).on( 'click', function( e )
  {
    if ( !$( e.target ).closest( '#campaign_dropdown' ).length )
      $( '#campaign_dropdown' ).removeClass( 'is-open' );
  });

  $( 'body' ).on( 'change', '#client_id', function()
  {
    var client_id = $( this ).val();
    storage_set( STORAGE_CLIENT_KEY, client_id );
    var campaigns_select = $( '#campaign_id' );
    var campaign_to_restore = restore_campaign_after_client_load;

    if ( !campaign_to_restore )
      storage_set( STORAGE_CAMPAIGN_KEY, '' );

    campaigns_select.empty().trigger( 'change' );
    rebuildCampaignDropdown();

    if ( !client_id )
      return;

    $.ajax({
      url: '/campaigns/get_campaigns_list/client_id=' + client_id,
      type: 'GET',
      success: function( response )
      {
        var data = JSON.parse( response );
        var campaigns = Object.entries( data.campaigns || {} );

        campaigns.sort( function( a, b ) {
          var nameA = String( ( a[1] && a[1].campaign_name ) ? a[1].campaign_name : '' ).toLowerCase();
          var nameB = String( ( b[1] && b[1].campaign_name ) ? b[1].campaign_name : '' ).toLowerCase();
          if ( nameA === '--- konto ---' ) return -1;
          if ( nameB === '--- konto ---' ) return 1;
          if ( nameA > nameB ) return 1;
          if ( nameA < nameB ) return -1;
          return 0;
        });

        campaigns.forEach( function( pair ) {
          var value = pair[1];
          campaigns_select.append( new Option( value.campaign_name, value.id, false, false ) );
        });

        rebuildCampaignDropdown();

        if ( campaign_to_restore )
        {
          campaigns_select.val( [ campaign_to_restore ] ).trigger( 'change' );
        }
        else
        {
          var account_option = campaigns_select.find( 'option' ).filter( function() {
            return $.trim( $( this ).text() ).toLowerCase() === '--- konto ---';
          } ).first();

          if ( account_option.length )
            campaigns_select.val( [ account_option.val() ] ).trigger( 'change' );
        }

        updateCheckboxState();
        updateDropdownDisplay();
        restore_campaign_after_client_load = '';
      }
    });
  });

  $( 'body' ).on( 'click', '#delete_campaign', function()
  {
    var selected = $( '#campaign_id' ).val() || [];

    if ( !selected.length )
    {
      $.alert({
        title: 'Uwaga',
        content: 'Najpierw wybierz kampanie do usuniecia.',
        type: 'orange'
      });
      return;
    }

    var names = [];
    selected.forEach( function( id ) {
      var text = $( '#campaign_id option[value="' + id + '"]' ).text();
      names.push( text );
    });

    var count = selected.length;
    var msg = '';

    if ( count === 1 )
    {
      msg = 'Czy na pewno chcesz usunac kampanie <strong>' + names[0] + '</strong>?';
    }
    else
    {
      var namesList = '<ul style="text-align:left; max-height:200px; overflow:auto; margin-top:10px;">';
      names.forEach( function( n ) { namesList += '<li>' + n + '</li>'; } );
      namesList += '</ul>';
      msg = 'Czy na pewno chcesz usunac <strong>' + count + '</strong> kampanii?' + namesList;
    }

    msg += '<br>Ta operacja jest nieodwracalna i usunie rowniez cala historie kampanii.';

    $.confirm({
      title: 'Potwierdzenie usuniecia',
      content: msg,
      type: 'red',
      buttons: {
        confirm: {
          text: count === 1 ? 'Usun' : 'Usun (' + count + ')',
          btnClass: 'btn-red',
          keys: ['enter'],
          action: function()
          {
            $.ajax({
              url: '/campaigns/delete_campaigns/',
              type: 'POST',
              data: { ids: selected },
              success: function( response )
              {
                var data = JSON.parse( response );
                if ( data.success )
                {
                  storage_set( STORAGE_CAMPAIGN_KEY, '' );

                  $.alert({
                    title: 'Sukces',
                    content: data.deleted === 1 ? 'Kampania zostala usunieta.' : 'Usunieto ' + data.deleted + ' kampanii.',
                    type: 'green',
                    autoClose: 'ok|2000'
                  });
                  $( '#client_id' ).trigger( 'change' );
                }
                else
                {
                  $.alert({
                    title: 'Blad',
                    content: data.message || 'Nie udalo sie usunac kampanii.',
                    type: 'red'
                  });
                }
              }
            });
          }
        },
        cancel: { text: 'Anuluj' }
      }
    });
  });

  $( 'body' ).on( 'click', '.delete-history-entry', function()
  {
    var btn = $( this );
    var history_id = btn.data( 'id' );
    var date = btn.data( 'date' );

    $.confirm({
      title: 'Potwierdzenie usuniecia',
      content: 'Czy na pewno chcesz usunac wpis z dnia <strong>' + date + '</strong>?',
      type: 'red',
      buttons: {
        confirm: {
          text: 'Usun',
          btnClass: 'btn-red',
          keys: ['enter'],
          action: function()
          {
            $.ajax({
              url: '/campaigns/delete_history_entry/history_id=' + history_id,
              type: 'POST',
              success: function( response )
              {
                var data = JSON.parse( response );
                if ( data.success )
                {
                  $.alert({
                    title: 'Sukces',
                    content: 'Wpis zostal usuniety.',
                    type: 'green',
                    autoClose: 'ok|2000'
                  });
                  if ( $.fn.DataTable.isDataTable( '#products' ) )
                    $( '#products' ).DataTable().ajax.reload( null, false );
                  reloadChart();
                }
                else
                {
                  $.alert({
                    title: 'Blad',
                    content: data.message || 'Nie udalo sie usunac wpisu.',
                    type: 'red'
                  });
                }
              }
            });
          }
        },
        cancel: { text: 'Anuluj' }
      }
    });
  });

  $( 'body' ).on( 'change', '#campaign_id', function()
  {
    var vals = $( this ).val() || [];

    if ( $.fn.DataTable.isDataTable( '#products' ) )
    {
      $( '#products' ).DataTable().destroy();
      $( '#products tbody' ).empty();
    }
    $( '#history_bulk_actions' ).hide();
    $( '#select_all_history' ).prop( 'checked', false );

    if ( vals.length === 1 )
    {
      var campaign_id = vals[0];
      storage_set( STORAGE_CAMPAIGN_KEY, campaign_id );

      new DataTable( '#products', {
        ajax: {
          type: 'POST',
          url: '/campaigns/get_campaign_history_data_table/campaign_id=' + campaign_id,
        },
        processing: true,
        serverSide: true,
        searching: false,
        lengthChange: false,
        pageLength: 15,
        columns: [
          { width: '30px', orderable: false, className: 'dt-center', searchable: false },
          { width: '130px', name: 'date', orderable: false, className: "nowrap" },
          { width: '120px', name: 'roas30', orderable: false, className: "dt-type-numeric" },
          { width: '120px', name: 'roas_all_time', orderable: false, className: "dt-type-numeric" },
          { width: '180px', name: 'conversion_value', orderable: false, className: "dt-type-numeric" },
          { width: '140px', name: 'spend30', orderable: false, className: "dt-type-numeric" },
          { width: 'auto', name: 'comment', orderable: false },
          { width: 'auto', name: 'bidding_strategy', orderable: false },
          { width: '100px', name: 'budget', orderable: false, className: "dt-type-numeric" },
          { width: '60px', name: 'actions', orderable: false, className: "dt-center" }
        ],
        language: {
          processing: 'Ladowanie...',
          emptyTable: 'Brak danych do wyswietlenia',
          info: 'Wpisy _START_ - _END_ z _TOTAL_',
          infoEmpty: '',
          lengthMenu: 'Pokaz _MENU_ wpisow',
          paginate: {
            first: 'Pierwsza',
            last: 'Ostatnia',
            next: 'Dalej',
            previous: 'Wstecz'
          }
        }
      });

      reloadChart();
    }
    else
    {
      storage_set( STORAGE_CAMPAIGN_KEY, '' );
    }
  });

  // --- Checkboxy historii: select all, licznik, bulk delete ---

  function updateHistoryBulkActions()
  {
    var checked = $( '#products .history-check:checked' );
    var count = checked.length;
    $( '#history_selected_count' ).text( count );
    $( '#history_bulk_actions' ).toggle( count > 0 );
  }

  $( 'body' ).on( 'change', '#select_all_history', function()
  {
    var isChecked = this.checked;
    $( '#products .history-check' ).prop( 'checked', isChecked );
    updateHistoryBulkActions();
  });

  $( 'body' ).on( 'change', '.history-check', function()
  {
    var all = $( '#products .history-check' );
    var checked = $( '#products .history-check:checked' );
    $( '#select_all_history' ).prop( 'checked', all.length > 0 && all.length === checked.length );
    updateHistoryBulkActions();
  });

  $( 'body' ).on( 'draw.dt', '#products', function()
  {
    $( '#select_all_history' ).prop( 'checked', false );
    updateHistoryBulkActions();
  });

  $( 'body' ).on( 'click', '#delete_history_entries', function()
  {
    var ids = [];
    $( '#products .history-check:checked' ).each( function() {
      ids.push( $( this ).val() );
    });

    if ( !ids.length ) return;

    $.confirm({
      title: 'Potwierdzenie usuniecia',
      content: 'Czy na pewno chcesz usunac <strong>' + ids.length + '</strong> ' + ( ids.length === 1 ? 'wpis' : 'wpisow' ) + ' z historii?<br>Ta operacja jest nieodwracalna.',
      type: 'red',
      buttons: {
        confirm: {
          text: 'Usun (' + ids.length + ')',
          btnClass: 'btn-red',
          keys: ['enter'],
          action: function()
          {
            $.ajax({
              url: '/campaigns/delete_history_entries/',
              type: 'POST',
              data: { ids: ids },
              success: function( response )
              {
                var data = JSON.parse( response );
                if ( data.success )
                {
                  $.alert({
                    title: 'Sukces',
                    content: 'Usunieto ' + data.deleted + ' ' + ( data.deleted === 1 ? 'wpis' : 'wpisow' ) + '.',
                    type: 'green',
                    autoClose: 'ok|2000'
                  });
                  if ( $.fn.DataTable.isDataTable( '#products' ) )
                    $( '#products' ).DataTable().ajax.reload( null, false );
                  reloadChart();
                }
                else
                {
                  $.alert({
                    title: 'Blad',
                    content: data.message || 'Nie udalo sie usunac wpisow.',
                    type: 'red'
                  });
                }
              }
            });
          }
        },
        cancel: { text: 'Anuluj' }
      }
    });
  });

  var saved_client_id = storage_get( STORAGE_CLIENT_KEY );
  var saved_campaign_id = storage_get( STORAGE_CAMPAIGN_KEY );

  if ( saved_client_id && $( '#client_id option[value="' + saved_client_id + '"]' ).length )
  {
    restore_campaign_after_client_load = saved_campaign_id;
    $( '#client_id' ).val( saved_client_id ).trigger( 'change' );
  }
});
</script>