{{define "extra_head"}}
<style>
.product__media--preview__items object {
    width: 100%;
    display: block;
    pointer-events: none;
}
</style>
{{end}}

{{template "header.tmpl" .}}

<section class="breadcrumb__section">
    <div class="container">
        <div class="row row-cols-1">
            <div class="col">
                <div class="breadcrumb__content text-center">
                    <h2 class="breadcrumb__content--title text-white mb-10">{{.Product.PartNumber}}</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="product__details--section section--padding">
    <div class="container">
        <div class="row row-cols-lg-2 row-cols-md-2">
            <div class="col">
                <div class="product__details--media">
                    <div class="product__media--preview__items mb-25">
                        <a class="product__media--preview__items--link glightbox" href="{{if .Product.ImageProduct}}{{.Product.ImageProduct}}{{else if .Product.ImageFallbacks}}{{(index .Product.ImageFallbacks 0)}}{{else}}/assets/img/product/placeholder/{{.ProductType}}.svg{{end}}">
                            {{if .Product.ImageProduct}}<object data="{{.Product.ImageProduct}}" role="img" aria-label="{{.Product.PartNumber}}">{{end}}
                            {{range .Product.ImageFallbacks}}<object data="{{.}}">{{end}}
                                <img class="product__media--preview__items--img" src="/assets/img/product/placeholder/{{.ProductType}}.svg" alt="{{.Product.PartNumber}}">
                            {{range .Product.ImageFallbacks}}</object>{{end}}
                            {{if .Product.ImageProduct}}</object>{{end}}
                        </a>
                    </div>
                    {{if .Product.DiagramImage}}
                    <div class="product__media--preview__items mb-25">
                        <a class="product__media--preview__items--link glightbox" href="{{.Product.DiagramImage}}">
                            <object data="{{.Product.DiagramImage}}" role="img" aria-label="Especificaciones {{.Product.PartNumber}}">
                                <img class="product__media--preview__items--img" src="{{.Product.DiagramImage}}" alt="Especificaciones {{.Product.PartNumber}}">
                            </object>
                        </a>
                    </div>
                    {{end}}
                </div>
            </div>
            <div class="col">
                <div class="product__details--info">
                    <form action="#">
                        <h2 class="product__details--info__title mb-15">{{.Product.PartNumber}}</h2>
                        <div class="product__details--info__stock mb-12" style="border:2px dashed #e11d48;padding:16px;border-radius:10px;margin-top:12px;">
                            <span id="product-bodegas"
                                  hx-get="/api/product/bodegas?codigo={{.Product.PartNumber}}&amp;brand={{.Product.BrandName}}&amp;type={{.ProductType}}&amp;vehicle_type={{.VehicleType}}"
                                  hx-trigger="load"
                                  hx-swap="innerHTML">
                                Cargando...
                            </span>
                        </div>
                        <p class="product__details--info__desc mb-15">
                            {{.Product.Product}}{{with (stripProductSuffix .Product.Product .Product.Serie)}} - Serie: {{.}}{{end}}
                        </p>
                        <div class="product__variant">
                            <div class="product__variant--list mb-10">
                                <fieldset class="variant__input--fieldset">
                                    <legend class="product__variant--title mb-8">Posición:</legend>
                                    <p>{{.Product.Position}}</p>
                                </fieldset>
                            </div>
                            <div class="product__variant--list mb-10">
                                <fieldset class="variant__input--fieldset">
                                    <legend class="product__variant--title mb-8">Tier:</legend>
                                    <p>{{.Product.Tier}}</p>
                                </fieldset>
                            </div>
                            <div class="product__variant--list mb-10">
                                <fieldset class="variant__input--fieldset">
                                    <legend class="product__variant--title mb-8">Cantidad:</legend>
                                    <p>{{.Product.Quantity}}</p>
                                </fieldset>
                            </div>
                            {{if .Product.Notes}}
                            <div class="product__variant--list mb-15">
                                <fieldset class="variant__input--fieldset">
                                    <legend class="product__variant--title mb-8">Notas:</legend>
                                    <p>{{.Product.Notes}}</p>
                                </fieldset>
                            </div>
                            {{end}}
                            <div class="product__variant--list mb-15">
                                <div class="product__details--info__meta">
                                    <p class="product__details--info__meta--list"><strong>Tipo:</strong> <span>{{.ProductType}}</span></p>
                                    <p class="product__details--info__meta--list"><strong>Línea:</strong> <span>{{.Product.BrandName}}{{with (stripProductSuffix .Product.Product .Product.Serie)}} {{.}}{{end}}</span></p>
                                    <p class="product__details--info__meta--list"><strong>Marca:</strong> <span>{{.VehicleMake}}</span></p>
                                    <p class="product__details--info__meta--list"><strong>Modelo:</strong> <span>{{.VehicleModel}}</span></p>
                                </div>
                            </div>
                            {{if .Applications}}
                            <div class="product__variant--list mb-15">
                                <fieldset class="variant__input--fieldset">
                                    <legend class="product__variant--title mb-8">Aplicaciones:</legend>
                                    <table class="table" style="width:100%;border-collapse:collapse;">
                                        <thead>
                                            <tr style="border-bottom:2px solid #e5e7eb;">
                                                <th style="text-align:left;padding:8px;">Modelo</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{range .Applications}}
                                            <tr style="border-bottom:1px solid #e5e7eb;">
                                                <td style="padding:8px;">{{.Make}} {{.Model}}</td>
                                                <td style="padding:8px;">{{if .Years}}{{.Years}}{{else}}{{.YearsRange}}{{end}}</td>
                                                <td style="padding:8px;">{{.Position}}</td>
                                            </tr>
                                            {{end}}
                                        </tbody>
                                    </table>
                                </fieldset>
                            </div>
                            {{end}}
                            <div class="product__variant--list mb-15">
                                <a class="primary__btn" href="/" style="display:inline-block;">
                                    Volver al catálogo
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="product__details--tab__section section--padding">
    <div class="container">
        <div class="row row-cols-1">
            <div class="col">
                <ul class="product__tab--one product__details--tab d-flex mb-30">
                    <li class="product__details--tab__list active" data-toggle="tab" data-target="#description">Descripción</li>
                    <li class="product__details--tab__list" data-toggle="tab" data-target="#information">Información Adicional</li>
                </ul>
                <div class="product__details--tab__inner border-radius-10">
                    <div class="tab_content">
                        <div id="description" class="tab_pane active show">
                            <div class="product__tab--content">
                                <div class="product__tab--content__step mb-30">
                                    <h2 class="product__tab--content__title h4 mb-10">{{.Product.Product}}</h2>
                                    <p class="product__tab--content__desc">
                                        Parte #: {{.Product.PartNumber}}<br>
                                        {{with (stripProductSuffix .Product.Product .Product.Serie)}}Serie: {{.}}<br>{{end}}
                                        Posición: {{.Product.Position}}<br>
                                        Tier: {{.Product.Tier}}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div id="information" class="tab_pane">
                            <div class="product__tab--content">
                                <table class="table">
                                    <tbody>
                                        <tr><th>Número de parte</th><td>{{.Product.PartNumber}}</td></tr>
                                        <tr><th>Producto</th><td>{{.Product.Product}}</td></tr>
                                        {{with (stripProductSuffix .Product.Product .Product.Serie)}}<tr><th>Serie</th><td>{{.}}</td></tr>{{end}}
                                        <tr><th>Posición</th><td>{{.Product.Position}}</td></tr>
                                        <tr><th>Nivel</th><td>{{.Product.Tier}}</td></tr>
                                        <tr><th>Cantidad</th><td>{{.Product.Quantity}}</td></tr>
                                        <tr><th>Vehículo</th><td>{{.Product.VehicleAttrs}}</td></tr>
                                        {{if .Product.Years}}<tr><th>Años</th><td>{{.Product.Years}}</td></tr>{{end}}
                                        {{if .Product.YearsRange}}<tr><th>Rango de años</th><td>{{.Product.YearsRange}}</td></tr>{{end}}
                                        {{range .Product.ExtraSpecs}}
                                        <tr>
                                            <th>{{.Label}}</th>
                                            <td>
                                                {{if eq .Label "Ficha técnica"}}
                                                    {{if hasPrefix .Value "http"}}
                                                        <a href="{{.Value}}" target="_blank" rel="noopener">{{.Value}}</a>
                                                    {{else}}
                                                        {{.Value}}
                                                    {{end}}
                                                {{else}}
                                                    {{.Value}}
                                                {{end}}
                                            </td>
                                        </tr>
                                        {{end}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
(function() {
  function collapseAplicaciones() {
    var tbody = document.querySelector('.product__details--info table.table tbody');
    if (!tbody) return;
    var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));
    if (rows.length === 0) return;

    var groups = {};
    rows.forEach(function(tr) {
      var cells = tr.children;
      if (cells.length < 3) return;
      var model = cells[0].textContent.trim();
      var position = cells[2].textContent.trim();
      var key = model + '||' + position;
      if (!groups[key]) {
        groups[key] = { model: model, position: position, years: [], sampleRow: tr };
      }
      var yearText = cells[1].textContent.trim();
      var matches = yearText.match(/\d{4}/g);
      if (matches) {
        matches.forEach(function(y) { groups[key].years.push(parseInt(y, 10)); });
      }
    });

    tbody.innerHTML = '';
    Object.keys(groups).forEach(function(key) {
      var g = groups[key];
      var tr = document.createElement('tr');
      tr.style.borderBottom = '1px solid #e5e7eb';

      var tdModel = document.createElement('td');
      tdModel.style.padding = '8px';
      tdModel.textContent = g.model;

      var tdYear = document.createElement('td');
      tdYear.style.padding = '8px';
      if (g.years.length > 0) {
        var min = Math.min.apply(null, g.years);
        var max = Math.max.apply(null, g.years);
        tdYear.textContent = (min === max) ? String(min) : min + '-' + max;
      } else {
        tdYear.textContent = '';
      }

      var tdPos = document.createElement('td');
      tdPos.style.padding = '8px';
      tdPos.textContent = g.position;

      tr.appendChild(tdModel);
      tr.appendChild(tdYear);
      tr.appendChild(tdPos);
      tbody.appendChild(tr);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', collapseAplicaciones);
  } else {
    collapseAplicaciones();
  }
})();
</script>

{{template "footer.tmpl" .}}