@extends('layouts.site')

<x-seo.json-ld :data="$structuredData ?? null" />

@section('content')
{{-- demo28.html: hero + itemgrid --}}
<section class="wrapper bg-gradient-blend">
  <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-14 md:pb-32 xl:pb-40 lg:pb-40">
    <div class="flex flex-wrap mx-[-15px] justify-center">
      <div class="w-full md:w-10/12 lg:w-9/12 xl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full">
        <figure class="!mb-0 flex justify-center">
          <img
            class="w-full h-auto max-w-full object-contain"
            src="{{ asset('assets/music-production.png') }}"
            alt="{{ __('music_productions.meta-index-title') }}"
            width="1056"
            height="576"
            loading="eager"
          >
        </figure>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="flex flex-wrap mx-[-15px] !mt-10">
      <div class="md:w-10/12 lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
        
        <h1 class="xl:!text-[2.4rem] !text-[calc(1.365rem_+_1.38vw)] font-semibold !leading-[1.15] !mb-5 xl:!px-14">{{ __('music_productions.meta-index-title') }}</h1>
        <p class="lead !text-[1.1rem] !mb-0">{{ __('music_productions.meta-index-description') }}</p>
        <div class="music-production-search">
          <form action="{{ route('music-productions.index') }}" method="GET" role="search" class="music-production-search__form">
            <span class="music-production-search__icon" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="7"/>
                <path d="M20 20l-3-3"/>
              </svg>
            </span>
            <input
              type="search"
              name="q"
              value="{{ $search ?? request('q') }}"
              class="music-production-search__input"
              placeholder="{{ __('music_productions.search_placeholder') }}"
              aria-label="{{ __('music_productions.search_placeholder') }}"
              autocomplete="off"
            >
          </form>
        </div>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
  <div class="overflow-hidden">
    <div class="divider !text-[#fefefe] mx-[-0.5rem]">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 92.26">
        <path fill="currentColor" d="M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z" />
      </svg>
    </div>
  </div>
  <!-- /.overflow-hidden -->
</section>
<!-- /section -->

<section class="wrapper">
  <div class="container pt-14 xl:pt-0 lg:pt-0 md:pt-0 pb-24 xl:pb-32 lg:pb-32 md:pb-32">
    @if($productions->count() > 0)
    <div class="itemgrid grid-view projects-masonry md:!mt-[-10rem] lg:!mt-[-15rem] xl:!mt-[-15rem] !mb-[10rem]">
      <div class="flex flex-wrap mx-[-20px] xl:mx-[-25px] lg:mx-[-25px] !mt-[-2rem] xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] isotope">
        @php
          $variants = [
            [
              'filter' => 'workshop',
              'tooltip' => 'itooltip-aqua',
              'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !mb-2 !text-[#54a8c7]",
            ],
            [
              'filter' => 'product',
              'tooltip' => 'itooltip-purple',
              'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-2 !text-[#747ed1]",
            ],
            [
              'filter' => 'product',
              'tooltip' => 'itooltip-yellow',
              'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#fab758] !mb-2 !text-[#fab758]",
            ],
            [
              'filter' => 'workshop',
              'tooltip' => 'itooltip-red',
              'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e2626b] !mb-2 !text-[#e2626b]",
            ],
            [
              'filter' => 'still-life',
              'tooltip' => 'itooltip-orange',
              'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#f78b77] !mb-2 !text-[#f78b77]",
            ],
            [
              'filter' => 'product',
              'tooltip' => 'itooltip-leaf',
              'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-2 !text-[#7cb798]",
            ],
          ];
        @endphp
        @foreach($productions as $index => $production)
          @php
            $variant = $variants[$index % count($variants)];
            $categoryLabel = $production->translate('client_name') ?: __('music_productions.card_category_default');
            $detailUrl = route('music-productions.show', $production->slug);
          @endphp
          <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full {{ $variant['filter'] }} px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
            <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
              <figure class="card-img-top music-production-cover itooltip {{ $variant['tooltip'] }}" title='<h5 class="!mb-0">{{ e(__('music_productions.view_details_tooltip')) }}</h5>'>
                <a href="{{ $detailUrl }}" class="music-production-cover__link">
                  @if($production->cover_image_url)
                    <img src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}" loading="lazy">
                  @else
                    <img src="{{ asset('assets/img/photos/pd6.jpg') }}" alt="{{ $production->translate('title') }}" loading="lazy">
                  @endif
                </a>
              </figure>
              <div class="card-body p-7">
                <div class="post-header">
                  <div class="{{ $variant['label_class'] }}">{{ $categoryLabel }}</div>
                  <h3 class="!mb-0 truncate" title="{{ $production->translate('title') }}">{{ $production->translate('title') }}</h3>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.project -->
        @endforeach
      </div>
      <!-- /.row -->
    </div>
    <!-- /.grid -->

    @if($productions->hasPages())
    <div class="flex flex-wrap mx-[-15px] !mt-[-4rem]">
      <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
        <nav class="pagination-wrapper flex justify-center">
          {{ $productions->links() }}
        </nav>
      </div>
    </div>
    @endif

    @else
    <div class="itemgrid grid-view projects-masonry md:!mt-[-10rem] lg:!mt-[-15rem] xl:!mt-[-15rem]">
      <div class="flex flex-wrap mx-[-15px]">
        <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center">
          <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !p-12">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-16 h-16 text-gray-300 mx-auto !mb-4">
              <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
            </svg>
            <p class="text-[#aab0bc] text-lg">
              @if(!empty($search))
                {{ __('music_productions.search_no_results', ['query' => $search]) }}
              @else
                {{ __('music_productions.empty') }}
              @endif
            </p>
          </div>
        </div>
      </div>
    </div>
    @endif
  </div>
  <!-- /.container -->
</section>
<!-- /section -->
@endsection

@push('styles')
<style>
.music-production-search {
  width: 100%;
  max-width: 36rem;
  margin: 2.25rem auto 1.75rem;
  padding: 0 0.25rem;
}
.music-production-search__form {
  position: relative;
  width: 100%;
}
.music-production-search__icon {
  position: absolute;
  left: 1.35rem;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #747ed1;
  pointer-events: none;
  transform: translateY(-50%);
}
.music-production-search__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.music-production-search__input {
  display: block;
  width: 100%;
  height: 3.35rem;
  margin: 0;
  padding: 0 1.35rem 0 3.35rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: #60697b;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(8, 60, 130, 0.12);
  border-radius: 50rem;
  box-shadow: 0 0.35rem 1.35rem rgba(30, 34, 40, 0.1);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.music-production-search__input::placeholder {
  color: #959ca9;
  opacity: 1;
}
.music-production-search__input:focus {
  border-color: #747ed1;
  box-shadow: 0 0.35rem 1.5rem rgba(116, 126, 209, 0.22);
}
.music-production-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* 1:1 kapak karesi — dikdörtgen görseli kırpar, yan boşluk bırakmaz */
.projects-masonry .music-production-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0.4rem 0.4rem 0 0;
}
.projects-masonry .music-production-cover__link {
  display: block;
  width: 100%;
  height: 100%;
}
.projects-masonry .music-production-cover img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  border-radius: 0.4rem 0.4rem 0 0;
}

.pagination-wrapper .pagination {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination-wrapper .pagination li {
  display: inline-flex;
}
.pagination-wrapper .pagination li a,
.pagination-wrapper .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 50rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #60697b;
  background: #f6f7f9;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
  text-decoration: none;
}
.pagination-wrapper .pagination li a:hover {
  background: #747ed1;
  border-color: #747ed1;
  color: #fff;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.25rem 0.75rem rgba(116, 126, 209, 0.25);
}
.pagination-wrapper .pagination li.active span,
.pagination-wrapper .pagination li span[aria-current="page"] {
  background: #747ed1;
  border-color: #747ed1;
  color: #fff;
}
.pagination-wrapper .pagination li.disabled span {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
@endpush