@include('menu')
<h2>Brochure Selector</h2>

@php
$models=\App\Models\HVACModel::all();
$families=\App\Models\HVACFamily::all();
$modelLines=\App\Models\HVACModelLine::all();
$heatPumpVersions=\App\Models\HVACHeatPumpVersion::all();
$refrigerantTypes=\App\Models\HVACRefrigerantType::all();

$modelMapping=[];
foreach ($models AS $m){
  $sku=substr($m->sku,0,7).substr($m->sku,-1);
  $mappingLevel=&$modelMapping;
  for ($s=0;$s<=7;$s++){
    $l=($s==3)?2:1;
    $symbol=substr($sku,$s,$l);
    if (!isset($mappingLevel[$symbol])){
      $mappingLevel[$symbol]=[];
    }
    $mappingLevel=&$mappingLevel[$symbol];
    if ($l==2){
      $s++;
    }
  }
}
@endphp
<script type="text/javascript">
var modelMapping={!!json_encode($modelMapping)!!};
</script>
<style type="text/css">
  td[id$="-symbol"]{background-color: #000000;color:#FFFFFF;width:30px;font-weight:bold;text-align:center;}
</style>


@php

$symbolList='';
$selectorNames=['family','model_line','heat_pump_version','capacity','erv','refrigerant_type','voltage'];

foreach($selectorNames AS $f){
  if ($f=='family'){
    $symbolList.='<li class="'.$f.'-symbol"><span>A</span></li>';
  }
  else {
    if ($f=='voltage'){
      $symbolList.='<li class="h-symbol">H</li>';
    }
    $f=str_replace('_','-',$f);
    $symbolList.='<li class="'.$f.'-symbol" onclick="HVACMapper.showOptionSet(\''.$f.'\');"><span>?</span><div class="connector"></div></li>';
  }
}
$selectorNames[]='generation';
@endphp
<style type="text/css">
  .d-none{
    display: none;
  }
#hvac-mapper {
width:300px;
text-align:center;
}
#hvac-mapper > div {
  border:1px solid #000000;
  padding:15px;
}
#hvac-mapper > div:not([id="generation-options"]) > div.active,
#hvac-mapper > div:not([id="generation-options"]) > div:hover,
#hvac-mapper > div#generation-options .question > div:hover {
  border:1px solid #000000;
  cursor:pointer;
}

#hvac-mapper ul {
  list-style: none;
}
#hvac-mapper ul li {
  text-align: center;
  width:30px;
  background-color: #000000;
  color:#DDDDDD;
  display:inline-block;
  position:relative;
  margin:0px;
}
#hvac-mapper ul li .connector {
  position:absolute;
  height:13px;
  border:none;
  left:50%;
  top:100%;
  border-left:1px solid #000000;
  display:none;
}
#hvac-mapper ul li.active .connector {
  display:block;
}

</style>
<div id="hvac-mapper"> 
<ul>{!!$symbolList!!}</ul>

<div id="model-line-options" class="d-none">
  <h3>Select your model line:</h3>
  @foreach($modelLines AS $ml)
    <div data-code="{{$ml->code}}" class="dnone" onclick="HVACMapper.update('model-line','{{$ml->code}}');">{{$ml->name}}</div>
  @endforeach
</div>

<div id="heat-pump-version-options" class="d-none">
  <h3>Does your device has heat strip ?</h3>
  @foreach($heatPumpVersions AS $hpv)
    <div data-code="{{$hpv->code}}" class="dnone" onclick="HVACMapper.update('heat-pump-version','{{$hpv->code}}');">{{(($hpv->code=='P')?'No, that is ':'Yes, that has ')}} {{$hpv->name}}</div>
  @endforeach
</div>

<div id="capacity-options" class="d-none">
  <h3>Select your capacity:</h3>
  @foreach([10=>10500,20=>21000] AS $c=>$v)
    <div data-code="{{$c}}" class="dnone" onclick="HVACMapper.update('capacity','{{$c}}');">{{$v}} BTU/h</div>
  @endforeach
</div>

<div id="erv-options" class="d-none">
  <h3>Does that have ERV onboard ?</h3>
  <div data-code="R" class="dnone" onclick="HVACMapper.update('erv','R');">Yes</div>
  <div data-code="N" class="dnone" onclick="HVACMapper.update('erv','N');">No</div>
</div>

<div id="refrigerant-type-options" class="d-none">
  <h3>Select your refrigerant type:</h3>
  @foreach($refrigerantTypes AS $rt)
    <div data-code="{{$rt->code}}" class="dnone" onclick="HVACMapper.update('refrigerant-type','{{$rt->code}}');">{{$rt->name}}</div>
  @endforeach
</div>

<div id="voltage-options" class="d-none">
  <h3>Choose your voltage:</h3>
  @foreach(['1'=>'115','2'=>230] AS $c=>$v)
    <div data-code="{{$c}}" class="dnone" onclick="HVACMapper.update('voltage','{{$c}}');">{{$v}}V</div>
  @endforeach
</div>

<div id="generation-options" class="d-none">
  <div class="question">
  <h3>Generate brochure for chosen model ?</h3>
  <div onclick="BrochureGenerator.run();">Yes, please</div>
  </div>
  <div class="processing d-none">Generating you a brochure, please wait</div>
  <div class="result d-none">Your file is <a target="_blank">here</a></div>
</div>
</div>


<script type="text/javascript">
let selectorNames={!!str_replace('_','-',json_encode($selectorNames))!!};
let chosenField='model-line';
let chosenCodes={};

var HVACMapper={
'showOptionSet':function(field){
  if (chosenField!=''){
    document.querySelectorAll('.'+chosenField+'-symbol').forEach(e=>{e.classList.remove('active');});
    document.getElementById(chosenField+'-options').classList.add('d-none');
  }
  if (selectorNames.indexOf(field)>selectorNames.indexOf(chosenField)){
    field=chosenField;
  }
  document.getElementById(field+'-options').classList.remove('d-none');
  document.querySelectorAll('.'+field+'-symbol').forEach(e=>{e.classList.add('active');});
  
  chosenField=field;
  
},
'update':function(field,code){
  var code=code;
  
  console.log(field+': '+code);
  
  document.querySelectorAll('#'+field+'-options .active').forEach(e=>{e.classList.remove('active');});
  
  document.querySelectorAll('.'+field+'-symbol span').forEach(function(e){
    e.innerHTML=code;
  });
  document.querySelectorAll('#'+field+'-options > div[data-code="'+code+'"]').forEach(e=>{e.classList.add('active');});
  
  document.querySelectorAll('.'+field+'-symbol').forEach(function(e){
    e.classList.remove('active');
  });
  
  
  document.getElementById(field+'-options').classList.add('d-none');
  
  
  
  
  document.getElementById(field+'-options').classList.add('d-none');
  
  chosenField=selectorNames[selectorNames.indexOf(field)+1];
  
  if (typeof(chosenCodes[field])=='undefined' || chosenCodes[field]!=code){
    for(let j=selectorNames.indexOf(chosenField);j<(selectorNames.length-1);j++){
      document.querySelectorAll('.'+selectorNames[j]+'-symbol span').forEach(function(e){
        e.innerHTML='?';
      });
      document.querySelectorAll('#'+selectorNames[j]+'-options .active').forEach(function(e){
        e.classList.remove('active');
        
      });
      chosenCodes[selectorNames[j]]='';
    }
  }
  chosenCodes[field]=code;
  if (field=='voltage'){
    return BrochureGenerator.show();
  }
  
  let ni=selectorNames.indexOf(chosenField),currentMapping={}, mapKey='[\'A\']';
  for (let i=1;i<ni;i++){
    mapKey+='[\''+chosenCodes[selectorNames[i]]+'\']';
  }
  let toEval='currentMapping=modelMapping'+mapKey+';';
  console.log(toEval);
  eval(toEval);
  let newKeys=Object.keys(currentMapping);
  
  document.querySelectorAll('#'+chosenField+'-options > div').forEach(function(e){
    e.classList[(newKeys.indexOf(e.dataset['code'])>=0)?'remove':'add']('d-none');
  });
  
  if (newKeys.length>1){
    document.querySelectorAll('.'+chosenField+'-symbol').forEach(function(e){
      e.classList.add('active');
    });
    document.getElementById(chosenField+'-options').classList.remove('d-none');
  }
  else {
    HVACMapper.update(chosenField,newKeys[0]);
  }
}
};
HVACMapper.showOptionSet('model-line');

var BrochureGenerator={
  'show':function(){
    ['result','processing'].forEach(function(s){
      document.querySelector('#generation-options .'+s).classList.add('d-none');
    });
    document.querySelector('#generation-options .question').classList.remove('d-none');
    document.getElementById('generation-options').classList.remove('d-none');
  },
  'run':function(){
    document.querySelector('#generation-options .question').classList.add('d-none');
    document.querySelector('#generation-options .processing').classList.remove('d-none');
    
    fetch('