@assets
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.min.css"
        integrity="sha512-s4DOVHc73MjMnsueMjvJSnYucSU3E7WF0UVGRQFd/QDzeAx0D0BNuAX9fbZSLkrYW7V2Ly0/BKHSER04bCJgtQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide.min.css"
        integrity="sha512-KhFXpe+VJEu5HYbJyKQs9VvwGB+jQepqb4ZnlhUF/jQGxYJcjdxOTf6cr445hOc791FFLs18DKVpfrQnONOB1g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endassets

<style>
  /* Card base y estados (mismo look del ejemplo) */
  .template-card{
    transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,filter .18s ease;
    border-radius:12px;overflow:hidden;position:relative;cursor:pointer
  }
  .template-card.is-not-selected{opacity:.85}
  .template-card:hover{transform:translateY(-2px);transition:.3s;box-shadow:0 10px 22px rgba(0,0,0,.18)}
  .template-card.is-selected{border:0}

  /* Flechas Bootstrap un poco más visibles */
  #dressCodeCarousel .carousel-control-prev-icon,
  #dressCodeCarousel .carousel-control-next-icon{
    background-color:rgba(0,0,0,.55);border-radius:50%;padding:20px;background-size:50% 50%
  }
  #dressCodeCarousel .carousel-control-prev,
  #dressCodeCarousel .carousel-control-next{width:8%}
</style>

<div class="row">
    <section id="dressCode">
        <div class="col-md-12">
            <div class="col-12">
                <div class="form-group">
                    <label for="dress-code-text">{{ __('Encabezado') }}</label>
                    <input type="text" id="dress-code-title" class="form-control rounded-5 px-4"
                        name="dress_code_title" wire:model="form.dressCodeTitle"
                        placeholder="{{ __('Código de Vestimenta') }}"></input>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <label for="dress-code-text">{{ __('Mensaje para tus invitados') }}</label>
                    <textarea name="dress_code_text" id="dress-code-text" cols="30" rows="5"
                     class="form-control rounded-5 px-4" wire:model="form.dressCodeText" 
                     placeholder="{{ __('Te contamos cómo vestirte para el evento...') }}">
                    </textarea>
                </div>
            </div>
            <div class="border border-1 mt-4 mb-3" style="border-color: #707070!important;"></div>

            <p>Podés usar una de nuestras sugerencias o personalizar tu propio estilo para los invitados.</p>
            <div class="" id="btn-options">
                <div class="">
                    <div class="btn-group mb-3 bg-primary" role="group" aria-label="Button group with nested dropdown">
                        <button x-on:click="view = 'suggestion'" :disabled="view == 'suggestion'"
                        class="btn text-white btn-sm px-3">
                        Elegir una sugerencia
                        </button>
                        <button
                        x-on:click="view = 'customize'; $wire.dispatch('triggerCustomDressCode')"
                        :disabled="view == 'customize'"
                        class="btn text-white btn-sm px-3">
                        Personalizado
                        </button>
                    </div>
                </div>

                <div class="card-content">
                    <div class="card-body">

                        {{-- aca empieza --}}
                        <div class="row" x-show="view == 'suggestion'" x-transition>
                          <div class="col-12">
                            @php
                              $selectedDressId = $form['dressCodeId'] ?? $form['dress_code_id'] ?? $form['dressCode'] ?? null;
                              $chunkSize = 1;
                              $chunks = $dressCodes->chunk($chunkSize);
                            @endphp

                            <div wire:ignore>
                              <div id="dressCodeCarousel" class="carousel slide" data-bs-ride="false" data-bs-interval="false">
                                <div class="carousel-inner">

                                  @forelse ($chunks as $chunkIndex => $chunk)
                                    <div class="carousel-item {{ $chunkIndex === 0 ? 'active' : '' }}">
                                      <div class="row g-3">
                                        @foreach ($chunk as $dressCode)
                                          @php
                                            $isSelected = (string)$selectedDressId === (string)$dressCode->id;
                                            $firstImg = optional($dressCode->images->first())->image_path;
                                          @endphp

                                          <div class="col-12 col-md-12">
                                            <div id="dressCard-{{ $dressCode->id }}"
                                                 class="card template-card {{ $isSelected ? 'is-selected' : 'is-not-selected' }}"
                                                 @click="$wire.selectDressCode({{ $dressCode->id }}); updateSelected({{ $dressCode->id }});">

                                              @if($isSelected)
                                                <div class="selected-badge">✓</div>
                                              @endif

                                              @if ($firstImg)
                                                <img class="card-img-top img-fluid d-block rounded-3 px-2 pt-2 fixed-img"
                                                     src="{{ Storage::url($firstImg) }}" alt="{{ $dressCode->name }}">
                                              @endif

                                              <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                  <h5 class="card-title mb-0 text-start">{{ $dressCode->name }}</h5>

                                                  @if (!empty($dressCode->desc))
                                                    <p class="d-inline-flex gap-1 mb-0">
                                                      <button
                                                        type="button"
                                                        class="btn bg-transparent border-0 p-0 text-start"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse-{{ $dressCode->id }}"
                                                        aria-expanded="false"
                                                        aria-controls="collapse-{{ $dressCode->id }}"
                                                        onclick="event.stopPropagation();">
                                                        <small>Ver descripción</small>
                                                      </button>
                                                    </p>
                                                  @endif
                                                </div>

                                                @if (!empty($dressCode->desc))
                                                  <div class="collapse" id="collapse-{{ $dressCode->id }}" wire:ignore>
                                                    <div class="card card-body border-0 text-start p-0">
                                                      {{ $dressCode->desc }}
                                                    </div>
                                                  </div>
                                                @endif

                                                {{-- Botón opcional: mantiene misma acción sin duplicar el click --}}
                                                <button type="button"
                                                        @click.stop="$wire.selectDressCode({{ $dressCode->id }}); updateSelected({{ $dressCode->id }});"
                                                        class="btn bg-primary text-white w-100 rounded-pill fw-semibold mt-3">
                                                  Usar este estilo
                                                </button>
                                              </div>
                                            </div>
                                          </div>
                                        @endforeach
                                      </div>
                                    </div>
                                  @empty
                                    <div class="carousel-item active">
                                      <div class="p-3">
                                        <p class="mb-0">No hay códigos de vestimenta disponibles.</p>
                                      </div>
                                    </div>
                                  @endforelse

                                </div>

                                @if($chunks->count() > 1)
                                  <button class="carousel-control-prev" type="button" data-bs-target="#dressCodeCarousel" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Anterior</span>
                                  </button>
                                  <button class="carousel-control-next" type="button" data-bs-target="#dressCodeCarousel" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Siguiente</span>
                                  </button>
                                @endif

                              </div>
                            </div>
                          </div>
                        </div>
                        {{-- aca termina --}}

                        <div class="row" x-show="view == 'customize'" x-transition>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="dress-code-text">{{ __('Nombre del Dress Code') }}</label>
                                    <input type="text" id="dressName" class="form-control rounded-5 px-4"
                                        name="dressName" wire:model="form.dressName"
                                        placeholder="{{ __('Ej: Total Black') }}"></input>
                                </div>
                            </div>
                            <div>
                                <div class="form-group">
                                    <label
                                        for="dress-code-description">{{ __('¿Cómo deben vestirse tus invitados?') }}</label>
                                    <textarea type="text" id="dressDescription" class="form-control rounded-5 px-4" name="dressDescription"
                                        wire:model="form.dressDescription" placeholder="{{ __('') }}"></textarea>
                                </div>
                            </div>
                            {{-- img personalizada --}}
                            <div class="col-12">
                                <div class="form-group">
                                    <label
                                        for="background-image">{{ __('Podés subir imágenes como ejemplo o inspiración de estilo para tus invitados.') }}</label>
                                    <input type="file" wire:model="form.customDressCode"
                                        class="form-control rounded-5 px-4 mb-3" name="customDressCode" autoupload
                                        accept="image/*">
                                </div>
                                @if (array_key_exists('customDressCode', $form) && is_string($form['customDressCode']))
                                    <div class="row justify-content-center">
                                        <div class="position-relative w-auto">
                                            <div class="position-absolute">
                                                <a class="btn btn-icon bg-danger p-1 border border-1 border-danger"
                                                    wire:click="deleteCustomDressCodePhoto()"
                                                    wire:confirm="Seguro que quiere borrar esta imágen?"><i
                                                        class="bi bi-trash3 text-white"></i>
                                                </a>
                                            </div>
                                            <img src="{{ Storage::url($form['customDressCode']) }}" alt="s3 normal"
                                                width="150px" class="" />
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

{{-- Script mínimo para actualizar el check sin re-render del carrusel --}}
@script
<script>
  window.updateSelected = function(id){
    const root = document.getElementById('dressCodeCarousel');
    if(!root) return;

    // resetear estados
    root.querySelectorAll('.template-card').forEach(card => {
      card.classList.remove('is-selected');
      card.classList.add('is-not-selected');
      const badge = card.querySelector('.selected-badge');
      if (badge) badge.remove();
    });

    // marcar el nuevo
    const active = document.getElementById('dressCard-' + id);
    if(active){
      active.classList.add('is-selected');
      active.classList.remove('is-not-selected');

      if(!active.querySelector('.selected-badge')){
        const b = document.createElement('div');
        b.className = 'selected-badge';
        b.textContent = '✓';
        active.appendChild(b);
      }
    }
  }
</script>
@endscript

@script
    <script type="text/javascript">
        Livewire.hook('element.init', ({
            component,
            el
        }) => {
            setTimeout(() => {
                Livewire.dispatch('reset-model-slider')

                var splideCheck = document.getElementById("main-carousel");

                if (!splideCheck) {
                    return
                }

                var main = new Splide('#main-carousel', {
                    type: 'fade',
                    rewind: true,
                    pagination: false,
                    arrows: true,
                });

                main.sync(thumbnails);
                main.mount();
                thumbnails.mount();
            }, 1000)
        })
    </script>
@endscript

@script
    <script type="text/javascript">
        let modelSlider
        let mostValuedSlider
        Livewire.on('reset-model-slider', () => {
            Alpine.store('step02', {
                model_sliders: false,
            })
            if (modelSlider === undefined) return
            modelSlider.destroy()
        })

        function initSlider(className, modelSlider, autoplay, numItems) {
            if (document.getElementsByClassName(className)[0] === undefined) {
                return
            }
            modelSlider = tns({
                container: '.' + className,
                items: numItems,
                gutter: 5,
                loop: false,
                controlsText: ['', ''],
                nav: false,
                autoplayButtonOutput: false,
                mouseDrag: true,
                slideBy: 1,
                autoplay,
                controls: false,
                responsive: {
                    640: {
                        items: 1.16
                    },
                    900: {
                        items: 1.16
                    }
                }
            });
        }
        Livewire.hook('element.init', ({
            component,
            el
        }) => {
            setTimeout(() => {
                let initialized = $store.step02 && $store.step02.model_sliders;
                if (initialized) {
                    return
                }
                Alpine.store('step02', {
                    model_sliders: true,
                })

                initSlider('other-options-slide', modelSlider, false, 1.16)
            }, 1)
        })
    </script>
@endscript