@extends('layouts.app')

@section('styles')
@endsection

@section('content')
		   <!-- .page -->
          <div class="page">
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-title-bar -->
              <header class="page-title-bar">
                <!-- .breadcrumb -->
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <a href="\">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto">{{ __('Organisations') }}</h1>
                  <!-- .btn-toolbar -->
                  <div class="btn-toolbar">
                    <button type="button" class="btn btn-primary" id="button">{{ __('Add Organisation') }}</button>
                  </div>
                  <!-- /.btn-toolbar -->
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->

              <!-- .page-section -->
              <div class="page-section">
                <!-- .card -->
                <section class="card card-fluid">
                  <!-- .card-header -->
                  <header class="card-header">
                    <!-- .nav-tabs -->
                    <ul class="nav nav-tabs card-header-tabs">
                      <li class="nav-item">
                        <a class="nav-link active show" role="tab" data-toggle="tab" href="#myorganisations">{{ __('My Organisations') }}</a>
                      </li>
                      @role('admin')
						  <li class="nav-item">
	                        <a class="nav-link" role="tab" data-toggle="tab" href="#allorganisations" >{{ __('All Organisations') }}</a>
	                      </li>
					  @endrole
                    </ul>
                    <!-- /.nav-tabs -->
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
				  	<div class="tab-content">

						<!-- .tabpanel -->
						<div role="tabpanel" class="tab-pane active" id="myorganisations">
                     		<!-- .table -->
                      		<table id="myorganisations-table" class="table table-responsive-xl">
                      			<!-- thead -->
                      			<thead>
                       				<tr>
						 				<th>{{ __('Name') }}</th>
             			  				<th>{{ __('Email Address') }}</th>
                			  				<th>{{ __('Created At') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Actions') }}</th>
                        				</tr>
                      			</thead>
                      			<!-- /thead -->
                      		</table>
                      		<!-- /.table -->
						</div>						
                  		<!-- /.tabpanel -->	

						@role('admin')
						<!-- .tabpanel -->
						<div role="tabpanel" class="tab-pane" id="allorganisations">
                     		<!-- .table -->
                      		<table id="allorganisations-table" class="table table-responsive-xl">
                      			<!-- thead -->
                      			<thead>
                       				<tr>
										<th>{{ __('Name') }}</th>
             			  				<th>{{ __('Email Address') }}</th>
                			  				<th>{{ __('Created At') }}</th>
						  				<th style="width:170px; min-width:170px;">{{ __('Actions') }}</th>
                        				</tr>
                      			</thead>
                      			<!-- /thead -->
                      		</table>
                      		<!-- /.table -->
						</div>						
                  		<!-- /.tabpanel -->	
						@endrole					

				  	</div>
                  	<!-- /.tab-content -->
				  </div>
                  <!-- /.card-body -->
                </section>
                
                @role('admin|regioadmin')
					<!-- .section-block -->
	                <div class="row">
		                	<div class="col-12 col-lg-12 col-xl-12">
		                    <!-- .card -->
		                    <section class="card card-fluid">
		                      <!-- .card-body -->
		                      <div class="card-body">
		                        <!-- .d-flex -->
		                        <div class="d-flex align-items-center mb-3">
		                          <h3 class="card-title mr-auto">{{ __('Invoiced Profiles in the Last Years') }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs" style="height:{{ $orgNameHeight }}px">
		                          <canvas id="last-year"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
					</div>
                @endrole
                
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('assets/javascript/pages/dashboard-demo.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/javascript/pages/dataTables.bootstrap.js') }}"></script>
	<script>
	
  $(function() {
	$('#myorganisations-table').DataTable({
	  processing: true,
      serverSide: true,
	  dom: "<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
      buttons: ['copyHtml5', { extend: 'print', autoPrint: false }],
      language: {
        info: "{{ __('datatables_info') }}",
        infoEmpty: "{{ __('datatables_infoEmpty') }}",
        infoFiltered: "{{ __('datatables_infoFiltered') }}",
        lengthMenu: "{{ __('datatables_lengthMenu') }}",
        processing: "{{ __('datatables_processing') }}",
        search: "{{ __('datatables_search') }}",
        thousands: "{{ __('datatables_thousands') }}",
        zeroRecords: "{{ __('datatables_zeroRecords') }}",
        paginate: {
          previous: '<i class="fa fa-lg fa-angle-left"></i>',
          next: '<i class="fa fa-lg fa-angle-right"></i>'
        }
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "{{ __('datatables_all') }}"]],
	  autoWidth: false,
	  ajax: '{!! route('organisations.myorganisations') !!}',
      deferRender: true,
      order: [0, 'asc'],
      columns: [
			{ data: 'organisationname', name: 'organisations.organisationname' },
			{ data: 'organisationemail', name: 'organisations.organisationemail' },
            { data: 'created_at', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
			{ data: 'id', name: 'organisations.id', orderable: false, searchable: false }
       ],
    });
  });
  
  @role('admin')

  $(function() {
  	
  	$('#allorganisations-table').DataTable({
      processing: true,
      serverSide: true,
	  dom: "<'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",
      buttons: ['copyHtml5', { extend: 'print', autoPrint: false }],
      language: {
        info: "{{ __('datatables_info') }}",
        infoEmpty: "{{ __('datatables_infoEmpty') }}",
        infoFiltered: "{{ __('datatables_infoFiltered') }}",
        lengthMenu: "{{ __('datatables_lengthMenu') }}",
        processing: "{{ __('datatables_processing') }}",
        search: "{{ __('datatables_search') }}",
        thousands: "{{ __('datatables_thousands') }}",
        zeroRecords: "{{ __('datatables_zeroRecords') }}",
        paginate: {
          previous: '<i class="fa fa-lg fa-angle-left"></i>',
          next: '<i class="fa fa-lg fa-angle-right"></i>'
        }
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "{{ __('datatables_all') }}"]],
	  autoWidth: false,
	  ajax: '{!! route('organisations.allorganisations') !!}',
      deferRender: true,
      order: [2, 'desc'],
      columns: [
            { data: 'organisationname', name: 'organisations.organisationname' },
			{ data: 'organisationemail', name: 'organisations.organisationemail' },
            { data: 'created_at', 'type': 'num', 'render': { '_': 'display', 'sort': 'timestamp' } },
			{ data: 'id', name: 'organisations.id', orderable: false, searchable: false }
       ],
    });
  });

  @endrole
 
// onclick event is assigned to the #button element.
document.getElementById("button").onclick = function() {
  window.location.href = "/organisations/create";
};
</script>
@role('admin|regioadmin')
	<script>
		var orgNameAry = {!! json_encode($orgNameAry) !!};
		var productAry = {!! json_encode($productAry) !!};
		var productLYAry = {!! json_encode($productLYAry) !!};
		var productNameAry = {!! json_encode($productNameAry) !!};
		datasets = [];
		
		// Calculate totals for each organisation to determine label colors
		var orgTotals012 = [];
		var orgTotals1224 = [];
		var orgLabelColors = [];
		
		// Initialize totals arrays
		for (var i = 0; i < orgNameAry.length; i++) {
			orgTotals012[i] = 0;
			orgTotals1224[i] = 0;
		}
		
		// Sum up all products for each organisation
		for (key in productNameAry) {
			for (var i = 0; i < orgNameAry.length; i++) {
				if (productAry[key] && productAry[key][i]) {
					orgTotals012[i] += parseInt(productAry[key][i], 10) || 0;
				}
				if (productLYAry[key] && productLYAry[key][i]) {
					orgTotals1224[i] += parseInt(productLYAry[key][i], 10) || 0;
				}
			}
		}
		
		// Determine colors based on comparison
		for (var i = 0; i < orgNameAry.length; i++) {
			if (orgTotals012[i] > orgTotals1224[i]) {
				orgLabelColors[i] = '#28a745'; // Green - positive growth
			} else if (orgTotals012[i] < orgTotals1224[i]) {
				orgLabelColors[i] = '#dc3545'; // Red - negative growth
			} else {
				orgLabelColors[i] = '#000000'; // Black - no change
			}
		}
		
		for (key in productNameAry) {
		    redValue = 192;
			greenValue = 192;
			blueValue = 192;
			if (key == 0) {
				redValue = 32;
				greenValue = 67;
				blueValue = 144;
			}
			if (key == 1) {
				redValue = 72;
				greenValue = 166;
				blueValue = 71;
			}
			if (key == 2) {
				redValue = 30;
				greenValue = 174;
				blueValue = 179;
			}
			if (key == 3) {
				redValue = 110;
				greenValue = 41;
				blueValue = 121;
			}
			if (key == 4) {
				redValue = 247;
				greenValue = 150;
				blueValue = 34;
			}
		    
		    dataset = {
    			label: productNameAry[key]+ ' 12-24',
    			backgroundColor: 'rgb(' + redValue + ', ' + greenValue + ', ' + blueValue + ')',
				borderColor: 'rgb(' + redValue + ', ' + greenValue + ', ' + blueValue + ')',
    			borderWidth: 1,
    			stack: 'Stack 0',
    			data: productLYAry[key]
    		};
    		datasets.push(dataset);
    		
		    dataset = {
    			label: productNameAry[key]+ ' 0-12',
    			backgroundColor: 'rgb(' + redValue + ', ' + greenValue + ', ' + blueValue + ')',
				borderColor: 'rgb(' + redValue + ', ' + greenValue + ', ' + blueValue + ')',
    			borderWidth: 1,
    			stack: 'Stack 1',
    			data: productAry[key]
    		};
    		datasets.push(dataset);
    		
		}
		var self = this;
	    var data = {
	      labels: orgNameAry,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#last-year')[0].getContext('2d');
	    
	    // Store original labels without arrows for colored display
	    var originalLabels = {!! json_encode($orgNameAry) !!};
	    
	    var chart = new Chart(canvas, {
	      type: 'horizontalBar',
	      data: data,
	      options: {
	        responsive: true,
	        maintainAspectRatio: false,
	        legend: { display: true, position: 'top'},
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },
	            stacked: true
	          }],
	          yAxes: [{
	            gridLines: {
	              display: false,
	              drawBorder: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 100,
	              fontColor: 'rgba(0,0,0,0)' // Make original labels invisible
	            },
	            stacked: true
	          }]
	        }
	      },
	      plugins: [{
	        afterDatasetsDraw: function(chart) {
	          var ctx = chart.ctx;
	          var yAxis = chart.scales['y-axis-0'];
	          
	          if (!yAxis) return;
	          
	          ctx.save();
	          ctx.textAlign = 'right';
	          ctx.textBaseline = 'middle';
	          ctx.font = Chart.helpers.fontString(
	            Chart.defaults.global.defaultFontSize || 12,
	            Chart.defaults.global.defaultFontStyle || 'normal',
	            Chart.defaults.global.defaultFontFamily || "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
	          );
	          
	          originalLabels.forEach(function(label, index) {
	            var y = yAxis.getPixelForTick(index);
	            var color = orgLabelColors[index] || '#666666';
	            
	            ctx.fillStyle = color;
	            ctx.fillText(label, yAxis.right - 10, y);
	          });
	          
	          ctx.restore();
	        }
	      }]
	    });
	</script>
	@endrole
@endpush