<div id="datos">
  <div class="ui top attached tabular menu">
    <a class="active item" data-tab="informacion">Informaci&oacute;n</a>
    <a class="item" data-tab="mapa">Ver Mapa</a>
    @if (property_exists($producto, 'descripcion'))
      <a class="item" data-tab="descripcion">Descripci&oacute;n del producto</a>
    @endif
  </div>
  <div class="ui bottom attached basic segment active tab" data-tab="informacion">
    <div class="ui grid">
      <div class="four wide column">
        <div class="ui two columns grid informacion">
          <div class="row">
            <div class="column">
              Precio:
            </div>
            <div class="column">
              {{$producto->valor() ?? ''}} UF
            </div>
          </div>
          <div class="row">
            <div class="column">
              Estado:
            </div>
            <div class="column">
              {{$producto->estado ?? ''}}
            </div>
          </div>
          <div class="row">
            <div class="column">
              Tipo:
            </div>
            <div class="column">
              {{$producto->segmento ?? ''}}
            </div>
          </div>
          <div class="row">
            <div class="column">
              Ubicaci&oacute;n:
            </div>
            <div class="column">
              {{implode(', ', [
                $producto->direccion->calle,
                $producto->direccion->comuna ?? '',
                $producto->direccion->ciudad ?? ''
              ])}}
            </div>
          </div>
          <div class="row">
            <div class="column">
              Unidades:
            </div>
            <div class="column">
              {{$producto->unidades ?? ''}}
            </div>
          </div>
          <div class="row">
            <div class="column">
              Modelos:
            </div>
            <div class="column">
              {{$producto->modelos ?? ''}}
            </div>
          </div>
          <div class="row">
            <div class="column">
              Tama&ntilde;o
            </div>
            <div class="column">
              {{$producto->tamaños ?? ''}}
            </div>
          </div>
        </div>
      </div>
      <div class="twelve wide column">
        {{$producto->descripcion ?? ''}}
      </div>
    </div>
  </div>
  <div class="ui bottom attached basic segment tab" data-tab="mapa">
    <div class="ui embed" id="map" data-source="Google Maps"
      data-url="https://maps.google.com/maps?hl=es&amp;amp;q={{($producto->direccion) ? str_replace(' ', '%20', implode(', ', [
        $producto->direccion->calle, $producto->direccion->comuna
      ])) : 'Santiago,%20Chile'}}&amp;amp;ie=UTF8&amp;amp;z={{($producto->direccion) ? 16 : 11}}&amp;amp;iwloc=B&amp;amp;output=embed"></div>
  </div>
  @if (property_exists($producto, 'descripcion'))
    <div class="ui bottom attached basic segment tab" data-tab="descripcion">
      <p>
        {!!nl2br($producto->descripcion)!!}
      </p>
    </div>
  @endif
</div>

@push('scripts')
  <script type="text/javascript">
    $(document).ready(() => {
      $('#datos').find('.tabular .item').tab()
      $('#map').embed()
    })
  </script>
@endpush
