@php
$models=\App\Models\HVACModel::all();
$families=\App\Models\HVACFamily::all();
$modelLines=\App\Models\HVACModelLine::all();
$heatStripVersions=\App\Models\HVACHeatStripVersion::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;}
  .forcer {
    display:none;
  }
  .forced .forcer {
    display: table-cell;
  }
</style>
@if (isset($withStep1))
<h3>Step 1. Choose devices</h3>
<p style="color:#FF0000;"><b>Note:</b> Check * if you need all options from that list. The chosen option will affect only the next elements of the selector but will be completely ignored during device selection.</p>
@endif
<table>
  <tr><td id="family-symbol">A</td><td>Family</td><td>AIO</td></tr>
  <tr><td id="model-line-symbol">?</td><td>Model Line</td><td><select name="model_line"><option value="?">Choose</option>@foreach($modelLines AS $ml)
    <option value="{{$ml->code}}">{{$ml->name}}</option>
  @endforeach</select></td>
  @if (isset($withStep1))
    <td class="forcer"><input type="checkbox" name="force[model_line]" value="1"/> *</td>
  @endif
  </tr>
  <tr><td id="heat-pump-version-symbol">?</td><td>Heat Pump Version</td><td><select name="heat_strip_version"><option value="?">Choose</option>@foreach($heatStripVersions AS $hpv)
    <option  disabled="disabled" value="{{$hpv->code}}">{{$hpv->name}}</option>
  @endforeach</select></td>
  @if (isset($withStep1))
    <td class="forcer"><input type="checkbox" name="force[heat_strip_version]" value="1"/> *</td>
  @endif
  </tr>
  <tr><td id="capacity-symbol">?</td><td>Capacity</td><td><select name="capacity"><option value="?">Choose</option>@foreach([10=>10500,20=>21000] AS $c=>$v)
    <option disabled="disabled" value="{{$c}}">{{$v}} BTU/h</option>
  @endforeach</select></td>
  @if (isset($withStep1))
    <td class="forcer"><input type="checkbox" name="force[capacity]" value="1"/> *</td>
  @endif
  </tr>
  <tr><td id="erv-symbol">?</td><td>With ERV ?</td><td><select name="erv"><option value="?">Choose</option>
    <option disabled="disabled" value="R">Yes</option>
    <option disabled="disabled" value="N">No</option>
  </select></td>
  @if (isset($withStep1))
  <td class="forcer"><input type="checkbox" name="force[erv]" value="1"/> *</td>  @endif
  </tr>
  <tr><td id="refrigerant-type-symbol">?</td><td>Refrigerant Type</td><td><select name="refrigerant_type"><option value="?">Choose</option>@foreach($refrigerantTypes AS $rt)
    <option  disabled="disabled" value="{{$rt->code}}">{{$rt->name}}</option>
  @endforeach
  </select></td>
  @if (isset($withStep1))
  <td class="forcer"><input type="checkbox" name="force[refrigerant_type]" value="1"/> *</td>  @endif
  </tr>
  <tr><td id="abandoned-symbol">H</td></tr>
  <tr><td id="voltage-symbol">?</td><td>Voltage</td><td><select name="voltage"><option value="?">Choose</option>@foreach([1=>115,2=>230] AS $c=>$v) <option disabled="disabled" value="{{$c}}">{{$v}}V</option>  @endforeach</select></td>
    @if (isset($withStep1))
    <td class="forcer"><input type="checkbox" name="force[voltage]" value="1"/> *</td>    @endif
  </tr>
  <tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
</table>
<script type="text/javascript">
let selectorNames=[];
document.querySelectorAll('select').forEach(function(e){
  selectorNames.push(e.name);
  
  e.addEventListener('change',function(ev){
    console.log(ev.target.name+' | '+ev.target.getAttribute('name')+' | '+ev.target.name.replace(/_/g,'-')+'-symbol');
    let forced=document.querySelector('input[name="force['+ev.target.name+']"]');
    document.getElementById(ev.target.name.replace(/_/g,'-')+'-symbol').innerHTML=(forced!=null && forced.checked)?'*':ev.target.value;
    let ni=selectorNames.indexOf(ev.target.name)+1;
    let nextSelectorName=selectorNames[ni];
    let toDisable=null;
    for (let i=ni;i<selectorNames.length;i++){
      toDisable=document.querySelector('select[name="'+selectorNames[i]+'"]');
      toDisable.value='?';
      document.getElementById(selectorNames[i].replace(/_/g,'-')+'-symbol').innerHTML=toDisable.value;
      toDisable.querySelectorAll('option + option').forEach(function(o){o.setAttribute('disabled','disabled');});
    }
    let currentMapping={}, mapKey='[\'A\']';
    
    for (let i=0;i<ni;i++){
      mapKey+='[\''+document.querySelector('select[name="'+selectorNames[i]+'"]').value+'\']';
    }
    let toEval='currentMapping=modelMapping'+mapKey+';';
    console.log(toEval);
    eval(toEval);
    
    Object.keys(currentMapping).forEach(function(k){
      document.querySelector('select[name="'+nextSelectorName+'"] option[value="'+k+'"]').removeAttribute('disabled');
    });
  });
});

document.querySelectorAll('input[name^="force"]').forEach(function(e){
  e.addEventListener('click',function(ev){
    var name=ev.target.name.replace('force[','').replace(']','');
    document.getElementById(name.replace(/_/g,'-')+'-symbol').innerHTML=(ev.target.checked)?'*':(document.querySelector('select[name="'+name+'"]').value);
  });  
});

</script>