@extends('layouts.website')



@if(!is_null($page_seo))
  @section('page_title', $page_seo->title)
  @section('metaDescription', $page_seo->description)
  @section('keywords', $page_seo->keywords)
@else
    @section('page_title', 'About us | Grindrod Limited')
    @section('metaDescription', "Our ambition is to find the perfect logistics solution for our customers across a multitude of industries including mining, agricultural, new energy commodities and project cargo.")
@endif

@section('inline-style')
<style>
  /*#chartdiv{
    height: 750px;
  }*/
</style>
@endsection
@section('content')

  @foreach($page_sections as $index => $page_section)

    {!! $page_section->section_content !!}

    @if($page_section->id == 16)
      <div class="embed-responsive embed-responsive-16by9" id="watch-video">
        <iframe class="embed-responsive-item" src="{{$page_section->embeded_video}}" allowfullscreen></iframe>
      </div>
    @endif

    @if($page_section->content_type == 'slider')
      <hero-banner-new sectionid="{{$page_section->id}}"></hero-banner-new>
    @endif

    @if($page_section->content_type == "csi_slider")
            <div id="csi-slider">
                <csi-slider  sectionid="{{$page_section->id}}"></csi-slider> 
            </div>
        @endif

    
    @if($page_section->id == 18)

      <section class="about-footprint" id="global-footprint">
          <div id="chartdiv"></div>
          <div class="container">
              <div class="about-services-links">
                <h5>Click below for <br>more detail on our services</h5>
                @foreach($services as $service)
                  <a href="#" class="service-item "  onclick="selectCountry({{ $service->countries }}, {{ $service->id }}, true, event)">{{ $service->name }}</a>
                @endforeach

                @foreach($services as $service)
                  <a href="/contact-us#{{ str_slug($service->name) }}" class="btn btn-primary contact-btn" id="contact-{{ $service->id }}">
                Contact us
                  </a>
                @endforeach
                
              </div>

              <a href="/solutions/customer/#explore-trade-corridors-solution" class="fp-link">
                Explore our trade corridors 
                <i class="fas fa-chevron-right"></i>
              </a>
          </div>
      </section>

    @endif

    @if($page_section->id == 20)

      <section class="about-story" id="our-story">
        <div class="container">
          <h2>our story</h2>
          <div class="story-cont">
            Since 1910 we have steadily climbed in reputation and ability. Our pioneering spirit from the early seventies which saw us at the forefront of containerisation in South Africa, is still very much part of our culture. We made smart investments in assets that further enhanced our offering and diversified the business into providing freight solutions from point of origin to final destination. 
          </div>
          <about-story-carousel></about-story-carousel>
        </div>
      </section>
    @endif

    @if($page_section->content_type == "news")
      <page-news2 page-news="{{ $page_news }}"></page-news2>
    @endif


  @endforeach
  <!-- <new-page-header section-id ="13">
    
  </new-page-header> -->

    <!-- <section class="page-header">
      <div class="bg-image" style="background-image: url('/images/about/main-banner.jpg')"></div>
      <div class="container">
        <div class="banner-description">
          <h1>Who we are</h1>
          <div class="banner-copy">
            <p>
              Through tenacity, courage and vision, Grindrod grew from humble beginnings into a global powerhouse that is listed on the JSE and is represented by subsidiaries, joint ventures and associated companies in 23 countries. We work hard everyday to earn our customer's trust. We are passionate about understanding their unique requirements and collaborating with them to create the most cost effective and efficient solution to move cargo across trade corridors - by road, rail, sea and air.
              <br><br>
              We operate with insight and agility, and lead with grit. It is this determination that is at the core of our success. 
            </p>  
          </div>          
        </div>
      </div>
    </section> -->

    <!-- <intro-with-block-new section-id ="14" block-classes="red-bg top-left">
      
    </intro-with-block-new> -->

    <!-- <section-after-intro-new section-id ="15" section-class="justify-content-end white-text align-text-top" bg-image="/images/about/culture.jpg" id="our-culture"> <!-- align-items-end -->
     
    <!-- </section-after-intro-new> --> 

    <!-- <section class="section-after-intro align-items-end justify-content-end white-text">
      <div class="section-img" style="background-image: url('/images/about/culture.jpg')"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-5">
            <h2>OUR culture</h2>
              <p>
                Fulfilling our purpose and strategy requires us to earn our customers’ trust by keeping our promises and going above and beyond. Our people are the heart of our business. They matter. We respect their rights their talents and their contribution. Everywhere we work we make a positive difference to local communities. Our ability to innovate and maintain long term thinking results in operational excellence and fast, consistent action.
              </p>
              <a href="#" class="btn btn-primary">What Drive Us</a>
          </div>
        </div>
      </div>
    </section> -->

    <!-- <section class="about-culture white-text">
      <div class="section-img" style="background-image: url('/images/about/culture.jpg')"></div>
      <div class="container">
        <div class="about-red-block red-bg top-left">
          <div class="inner-flex">
            Our commitment to forging new routes and <strong>delivering Africa’s commodities to the world</strong> is unwavering. 
          </div>
        </div>
        <div class="row align-items-end justify-content-end">
          <div class="col-lg-6">
            <div class="cont-padding-left">
              <h2>OUR culture</h2>
              <p>
                Fulfilling our purpose and strategy requires us to earn our customers’ trust by keeping our promises and going above and beyond. Our people are the heart of our business. They matter. We respect their rights their talents and their contribution. Everywhere we work we make a positive difference to local communities. Our ability to innovate and maintain long term thinking results in operational excellence and fast, consistent action.
              </p>
              <a href="#" class="btn btn-primary">What Drive Us</a>
            </div>
          </div>
        </div>
      </div>
    </section> -->

    <!-- <div class="embed-responsive embed-responsive-16by9" id="watch-video">
      <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/622257965?h=69d1839f03&badge=0&title=0&byline=0&portrait=0&badge=0&color=ffffff&rel=0" allowfullscreen></iframe>
    </div> -->

    <!-- <two-color-blocks-new section-id="17" section-class="about-people" left-col-class="light-grey-bg" right-col-class="red-bg" id="leaders-people">
      
    </two-color-blocks-new> -->

    <!-- <section class="about-people">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 pr-0">
            <div class="our-leaders">
              <h2>OUR LEADERS</h2>
              <p>
                We are one Grindrod, transparent and honest united by a bold purpose and clear strategy. Always solutions-driven we are committed to ensuring a safe working environment. We simplify and innovate taking accountability for outcomes. Our immersive approach to our own business and our customers’ makes it possible for Grindrod to deliver its best.
                <br><br>
                Members of the board are leaders in industry with diverse and extensive experience. The executive committee is made up of the Group Chief Executive Officer, Group Chief Financial Officer and the Chief Executive Officers of the divisions, Freight and Financial Services. The management teams within these divisions have specialised skills and many years of industry experience.
              </p>
              <br>
              <a href="#" class="btn btn-primary">Meet our leaders</a>
            </div>            
          </div>
          <div class="col-lg-6 pl-0">
            <div class="our-people">
              <h2>OUR PEOPLE</h2>
              <h3>Our greatest asset is our people.</h3>
              <p>
                Our ‘can do’ attitude motivates us to take on any challenge, exceed expectations and overcome barriers. Together we are a united, agile, enthusiastic force – committed to integrity, fairness, transparency, professionalism, respect for others, accountability for our actions, shared wisdom and a common goal.
                <br><br>
                <a href="#" class="btn-plus-icon">
                                Committed to transformation 
                                <i class="fas fa-chevron-right"></i>
                            </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section> -->

    <!-- <interactive-maps></interactive-maps> -->
    <!-- <global-footprint-map></global-footprint-map> -->

    

    <!-- <content-with-bg-img-new section-id ="19" section-class="white-text align-items-end light-blue-theme-s"  id="operational-excellence">
     
    </content-with-bg-img-new> -->

    <!-- <section class="operational-excellence" id="operational-excellence" style="">
      <div class="container">
        <div class="row align-items-end">
          <div class="col-lg-5">
            <h2>Operational excellence</h2>
            <p>
              We pride ourselves in finding the most efficient and cost effective solutions for our customers always focusing on delivering the best in industry standards. Our businesses are dependable and accredited in their fields of expertise.      
            </p>
            <h3>Safety is always at the forefront of all we do.</h3>
            <a href="/corporate-governance-and-coompliance" class="link-with-icon">
              See our accreditations 
              <i class="fas fa-chevron-right"></i>
            </a>
          </div>
        </div>
      </div>
    </section> -->

  
    
@endsection

@section('js')
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
// am4core.ready(function() {
var imageSeriesData = [{
    "title": "Johannesburg",
    "id": "Johannesburg",
    "latitude": -26.1714,
    "longitude": 28.0050,
  }];

let postsUrl = '/api/global-footprint';
let allCountries = [];
let allLocations = [];
let countryWithServices = [];

axios.get(postsUrl).then((response) => {
    // console.log('global footprint', response.data);
    allCountries = response.data.countries;
    allLocations = response.data.locations;
    countryWithServices = response.data.countryServices;

    initMap("chartdiv", allLocations, allCountries, countryWithServices);
});

var contactLink = '/contact-us?service=';

// initMap("chartdiv", allLocations, allCountries);

/*if(allCountries.length > 0 && allLocations.length > 0){
  initMap("chartdiv", allLocations, allCountries);
}*/

function initMap(id, imageSeriesData, countries = [], countryWithServices = [], showDots = false){
  am4core.useTheme(am4themes_animated);
  // Themes end

  // Create map instance
  var chart = am4core.create(id, am4maps.MapChart);

  // Set map definition
  // chart.geodata = am4geodata_worldLow;
  chart.geodata = am4geodata_worldLow;

  // Set projection
  chart.projection = new am4maps.projections.Miller();

  // Create map polygon series
  var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

  // Exclude Antartica
  polygonSeries.exclude = ["AQ"];
  // polygonSeries.selected = ["ZA", "SZ"];

  // Make map load polygon (like country names) data from GeoJSON
  polygonSeries.useGeodata = true;

  // Configure series
  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.tooltipText = "{name}";
  // polygonTemplate.fill = chart.colors.getIndex(0).lighten(0.5);
  polygonTemplate.fill = am4core.color("#e3e4e5");
  polygonTemplate.stroke = '#a4adb1';  

  // Create hover state and set alternative fill color
  /*var hs = polygonTemplate.states.create("hover");
  hs.properties.fill = am4core.color('#e41e26');*/

  // Create active state
  var activeState = polygonTemplate.states.create("active");
  activeState.properties.fill = '#e41e26';

  // Setting map's initial zoom
  chart.homeZoomLevel = 1.5;
  chart.homeGeoPoint = {
    latitude: -3.7968899172801702,
    longitude: 44.114926524293395
  };

  // Disable zoom and pan
  // chart.seriesContainer.draggable = false;
  chart.seriesContainer.resizable = false;
  chart.chartContainer.wheelable = false;
  chart.seriesContainer.events.disableType("doublehit");
  chart.chartContainer.background.events.disableType("doublehit");
  // chart.maxZoomLevel = 1;

  chart.zoomControl = new am4maps.ZoomControl();
  chart.zoomControl.align = "right";
  chart.zoomControl.valign = "middle";
  chart.zoomControl.parent = chart.tooltipContainer;
  chart.zoomControl.marginRight = 25;

  // add events to recalculate map position when the map is moved or zoomed
  chart.events.on( "ready", updateCustomMarkers );
  chart.events.on( "mappositionchanged", updateCustomMarkers );

  // Add image series
  var imageSeries = chart.series.push(new am4maps.MapImageSeries());
  imageSeries.mapImages.template.propertyFields.longitude = "longitude";
  imageSeries.mapImages.template.propertyFields.latitude = "latitude";
  /*var label = imageSeries.mapImages.template.createChild(am4core.Label);
  label.text = '{id}';
  label.strokeOpacity = 0;
  label.fill = am4core.color('#000000');
  label.horizontalCenter = 'middle';
  label.fontSize = 9;
  label.nonScaling = true;*/

  imageSeries.data = imageSeriesData;

  /*polygonTemplate.events.on("over", function(ev) {
    // ev.target.isActive = !ev.target.isActive;
    // alert('testing');
    console.log('map info', ev);
  });*/

  // console.log('country id', polygonSeries);
    
  // this function will take current images on the map and create HTML elements for them
  function updateCustomMarkers( event ) {
    
    if(showDots){
      // go through all of the images
      imageSeries.mapImages.each(function(image) {
        // check if it has corresponding HTML element
        if (!image.dummyData || !image.dummyData.externalElement) {
          // create onex
          image.dummyData = {
            externalElement: createCustomMarker(image)
          };
        }

        // reposition the element accoridng to coordinates
        var xy = chart.geoPointToSVG( { longitude: image.longitude, latitude: image.latitude } );
        image.dummyData.externalElement.style.top = xy.y + 'px';
        image.dummyData.externalElement.style.left = xy.x + 'px';

      });
    }    

    // var label = labelSeries.mapImages.create();

    if(countries.length > 0){
      var north, south, west, east;

      var labelSeries = chart.series.push(new am4maps.MapImageSeries());
      var labelTemplate = labelSeries.mapImages.template.createChild(am4core.Label);
      labelTemplate.horizontalCenter = "middle";
      labelTemplate.verticalCenter = "middle";
      labelTemplate.fontSize = 14;
      labelTemplate.nonScaling = true;
      labelTemplate.interactionsEnabled = false;
      labelTemplate.fill = '#fff';

      countries.forEach(function(item, index){
        // console.log('country id', item);
        if ('isActive' in polygonSeries){
          var country = polygonSeries.getPolygonById(item);
          // console.log('country id', country.polygon);
          if(country){
            // country.tooltipText = `[bold]YEAR 2021[/]\nCars\nMotorcycles: 520\nBicycles: 12`;
            // let cServices = countryServices(item);
            if(!showDots){
              country.tooltipText = countryServices(item);
              country.tooltip.pointerOrientation = "vertical";  
              country.tooltip.getFillFromObject = false;

              // country.tooltip.background.filters.clear();
              country.tooltip.background.fill = am4core.color('#f4f2ef');
              country.tooltip.background.stroke = am4core.color('#f4f2ef');
              country.tooltip.background.cornerRadius = 0;
              country.tooltip.background.fillOpacity  = 1;
              var mfilters = country.tooltip.filters;
              var dsfilters = country.tooltip.DropShadowFilter;

              mfilters.dx = 0;
              mfilters.dy = 0;
              mfilters.blur = 0;
              mfilters.opacity = 0;

              console.log('country id', dsfilters);

              country.tooltip.autoTextColor = false;
              country.tooltip.label.fill = am4core.color("#000000");

              
            }else{
              country.tooltipText = '';
              // alert('showing dots');
            }       

            // CREATE LABEL FOR COUNTRY NAME
            /*var state = country.dataItem.dataContext;
            // console.log('Country name', country.dataItem.dataContext);
            var label = labelSeries.mapImages.create();
            label.latitude = country.visualLatitude;
            label.longitude = country.visualLongitude;
            label.children.getIndex(0).text = state.name; */

            if (north == undefined || (country.north > north)) {
              north = country.north;
            }
            if (south == undefined || (country.south < south)) {
              south = country.south;
            }
            if (west == undefined || (country.west < west)) {
              west = country.west;
            }
            if (east == undefined || (country.east > east)) {
              east = country.east;
            } 
          }

          country.isActive = true;

        }
        
      });

      // chart.zoomToRectangle(north, east, south, west, 0.5, true,1000);

    }

  }

  function countryServices(code){

    // console.log('global footprint countryWithServices', countryWithServices);
    let services = [];
    for (var key in countryWithServices) {
      let country = countryWithServices[key];
      let getName = key.split("_",2);
      let servicesList = country.join("\n");

      services[getName[1]] = "[bold]"+ getName[0] +"[/]\n"+ servicesList;
      
    }

    /* let services = {
      'ZA': "[bold]South Africa[/]\nBank\nClearing and forwarding\nCross border and project logistics\nIntermodal\nMarine technical services\nRail\nSeafreight\nShips agency\nStevedoring\nTerminals",
      'AU': "[bold]Australia[/]\nShips agency",
      'ID': "[bold]Indonesia[/]\nShips agency",
      'KE': "[bold]Kenya[/]\nShips agency",
      'SZ': "[bold]Kingdom of eSwatini[/]\nCross border and project logistics",
      'MG': "[bold]Madagascar[/]\nShips agency",
      'MW': "[bold]Malawi[/]\nRail",
      'MU': "[bold]Mauritius[/]\nRail",
      'MZ': "[bold]Mozambique[/]\nClearing and forwarding\nCross border and project logistics\nIntermodal\nPort\nRail\nSeafreight\nShips agency\nStevedoring\nTerminals",
      'NA': "[bold]Namibia[/]\nClearing and forwarding\nRail\nSeafreight\nShips agency\nStevedoring\nTerminals",
      'PG': "[bold]Papua New Guinea[/]\nShips agency",
      'SL': "[bold]Sierra Leone[/]\nRail",
      'SG': "[bold]Singapore[/]\nShips agency",
      'TZ': "[bold]Tanzania[/]\nRail\nShips agency",
      'TH': "[bold]Thailand[/]\nShips agency",
      'TL': "[bold]Timor-Leste[/]\nShips agency",
      'AE': "[bold]UAE[/]\nShips agency",
      'ZM': "[bold]Zambia[/]\nCross border and project logistics\nRail",
      'ZW': "[bold]Zimbabwe[/]\nRail",
    }; */

    return services[code];
  }

  // this function creates and returns a new marker element
  function createCustomMarker( image ) {
    
    var chart = image.dataItem.component.chart;

    // create holder
    var holder = document.createElement( 'div' );
    holder.className = 'map-marker';
    holder.fullname = image.dataItem.dataContext.title +', '+ image.dataItem.dataContext.country;
    holder.service = image.dataItem.dataContext.service;
    // holder.country = image.dataItem.dataContext.country;
    holder.id = image.dataItem.dataContext.id;
    holder.style.position = 'absolute';

    // maybe add a link to it?
    if ( undefined != image.url ) {
      holder.onclick = function() {
        window.location.href = image.url;
      };
      holder.className += ' map-clickable';
    }

    // create dot
    /*var dot = document.createElement( 'div' );
    dot.className = 'dot';
    holder.appendChild( dot );*/

    // create pulse
    var pulse = document.createElement( 'div' );
    pulse.className = 'pulse';
    holder.appendChild( pulse );

    // create popover
    var pulseTootip = document.createElement( 'div' );
    pulseTootip.className = 'pulse-popover';
    pulseTootip.innerHTML = '<h3>'+ holder.service +'</h3>'+ holder.fullname;
    holder.style.position = 'absolute';
    holder.appendChild( pulseTootip );

    // append the marker to the map container
    chart.svgContainer.htmlElement.appendChild( holder );

    holder.addEventListener("click", function(event) {
      // chart.zoomToMapObject(image);
      // console.log('holder', image.dataItem);
      console.log('event', holder.id);
    });

    return holder;
  }
}



/*imageSeries.data = [ {
  "title": "Brussels",
  "latitude": 50.8371,
  "longitude": 4.3676
}, {
  "title": "Copenhagen",
  "latitude": 55.6763,
  "longitude": 12.5681
}, {
  "title": "Paris",
  "latitude": 48.8567,
  "longitude": 2.3510
}, {
  "title": "Reykjavik",
  "latitude": 64.1353,
  "longitude": -21.8952
}, {
  "title": "Moscow",
  "latitude": 55.7558,
  "longitude": 37.6176
}, {
  "title": "Madrid",
  "latitude": 40.4167,
  "longitude": -3.7033
}, {
  "title": "London",
  "latitude": 51.5002,
  "longitude": -0.1262,
  "url": "http://www.google.co.uk"
}, {
  "title": "Peking",
  "latitude": 39.9056,
  "longitude": 116.3958
}, {
  "title": "New Delhi",
  "latitude": 28.6353,
  "longitude": 77.2250
}, {
  "title": "Tokyo",
  "latitude": 35.6785,
  "longitude": 139.6823,
  "url": "http://www.google.co.jp"
}, {
  "title": "Ankara",
  "latitude": 39.9439,
  "longitude": 32.8560
}, {
  "title": "Buenos Aires",
  "latitude": -34.6118,
  "longitude": -58.4173
}, {
  "title": "Brasilia",
  "latitude": -15.7801,
  "longitude": -47.9292
}, {
  "title": "Ottawa",
  "latitude": 45.4235,
  "longitude": -75.6979
}, {
  "title": "Washington",
  "latitude": 38.8921,
  "longitude": -77.0241
}, {
  "title": "Kinshasa",
  "latitude": -4.3369,
  "longitude": 15.3271
}, {
  "title": "Cairo",
  "latitude": 30.0571,
  "longitude": 31.2272
}, {
  "title": "Pretoria",
  "id": "Pretoria",
  "latitude": -25.7463,
  "longitude": 28.1876
}, {
  "title": "Johannesburg",
  "id": "Johannesburg",
  "latitude": -26.1714,
  "longitude": 28.0050,
}
];*/



// Create an event to toggle "active" state
/*polygonTemplate.events.on("hit", function(ev) {
    ev.target.isActive = !ev.target.isActive;
});
*/
// var selected;
$(function(){
  $(document).on("click",".service-item",function() {
    $('.about-services-links .service-item').removeClass('active');
    $(this).addClass('active');
  });
});

function selectCountry(countries, service, showDots, e) {
  e.preventDefault();

  
  // alert('hello');

  // console.log('country id', polygonSeries.states.getKey("active")); // .properties.shiftRadius = 0

  // const countries = ['ZA', 'SZ', 'ZW'];
  /*countries.forEach(function(item, index){
    // console.log('country id', item);
    selected = polygonSeries.getPolygonById(item);
    selected.isActive = true;
  });*/

  // alert(service);

  /*var imageSeriesData = [{
    "title": "Pretoria",
    "id": "Pretoria",
    "latitude": -25.7463,
    "longitude": 28.1876
  }, {
    "title": "Johannesburg",
    "id": "Johannesburg",
    "latitude": -26.1714,
    "longitude": 28.0050,
  }];*/

  let postsUrl = '/api/service-footprint/'+ service;
  let allCountries = [];
  let allLocations = [];
  axios.get(postsUrl).then((response) => {
      // console.log('global footprint', response.data);
      allCountries = response.data.countries;
      allLocations = response.data.locations;
      countryWithServices = response.data.countryServices;

      initMap("chartdiv", allLocations, allCountries, countryWithServices, showDots);
  });

  // initMap("chartdiv", imageSeriesData, countries);

  // contactLink += service;
  $('.contact-btn').hide();
  $('#contact-'+ service).show();
  
}

/*$('.contact-btn').on('click', function(e){
  e.preventDefault();
  alert(contactLink);
})*/

// }); // end am4core.ready()
</script>
@endsection