@extends('layouts.site')

@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="player-container">
              <div class="player" data-player data-playlist="prod-{{ $production->id }}" data-track="0">
                <div class="player__content">
                  <div class="player__artist">{{ $production->translate('client_name') ?: __('music_productions.card_category_default') }}</div>
                  <div class="player__album">
                    @if($production->production_date)
                      {{ $production->production_date->format('Y') }}
                    @else
                      &nbsp;
                    @endif
                  </div>
                  <div class="player__track">{{ $production->translate('title') }}</div>
                </div>

                <a href="{{ $detailUrl }}" class="album" data-album>
                  @if($production->cover_image_url)
                    <div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
                  @else
                    <div class="album__cover" style="background-image: url('{{ asset('assets/img/photos/pd6.jpg') }}');"></div>
                  @endif
                  <div class="vinyl">
                    <div class="vinyl__shadow"></div>
                    <div class="vinyl__circle">
                      <div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url ?: asset('assets/img/photos/pd6.jpg') }}')"></div>
                    </div> 
                  </div>
                </a>
              </div>
            </div>
          </div>
        @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-[#74788d] 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;
}

/* --- Vinyl Player Styles --- */
:root {
  --color-black: #000;
  --color-gray: #5e6062;
  --color-white: #fff;
  --color-yellow: #f0f39c;
  --color-yellow-light: #fff99e;
  --transition-time: 250ms;
  --transition-method: ease-in-out;
  --album-size: 260px;
  --vinyl-offset: 15px;
  --vinyl-size: calc(var(--album-size) - var(--vinyl-offset));
  --vinyl-center-size: 110px;
}

.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  perspective: 1000px;
}

.player {
  color: var(--color-gray);
  font-family: 'Raleway', 'Outfit', sans-serif;
  height: var(--album-size);
  line-height: 1.2;
  position: relative;
  width: var(--album-size);
  transition: all var(--transition-time) var(--transition-method);
  margin: 0 auto;
}

.player::after {
  transform: rotate(-2deg);
  transition: all var(--transition-time) var(--transition-method);
  background: #777;
  bottom: 12px;
  box-shadow: 0 15px 23px rgba(0, 0, 0, 0.3);
  content: '';
  height: 10px;
  left: 2%;
  opacity: 0;
  padding-left: 5%;
  position: absolute;
  width: 96%;
  z-index: 5;
}

.player:hover::after {
  opacity: 0.6;
}

.player .player__content {
  background-color: var(--color-white);
  height: 100%;
  padding: 50px 15px 0 15px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
  width: 100%;
  z-index: 50;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgba(8, 60, 130, 0.05);
  transition: all var(--transition-time) var(--transition-method);
}

.player .player__artist {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #343f52;
}

.player .player__album {
  font-size: 13px;
  font-weight: 300;
  margin-bottom: 15px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #a4aec6;
}

.player .player__track {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 15px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #60697b;
}

.player .player__track::before,
.player .player__track::after {
  content: '"';
  font-size: 14px;
  vertical-align: middle;
}

.album {
  transition: all var(--transition-time) var(--transition-method);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  border-radius: 8px;
}

.project.item:has(.player:hover) {
  z-index: 9999 !important;
}

.player:hover {
  z-index: 999;
}

.player:hover .player__content {
  transform: translateX(-260px);
  box-shadow: -10px 15px 35px rgba(0,0,0,0.1);
}

.player:hover .album {
  transform: scale(1.5);
  z-index: 150;
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.25);
}

.album__cover {
  background-color: var(--color-black);
  background-size: cover;
  background-position: center;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 20;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.vinyl {
  transition: all var(--transition-time) var(--transition-method);
  left: calc(var(--vinyl-offset) / 2);
  position: absolute;
  top: calc(var(--vinyl-offset) / 2);
  height: var(--vinyl-size);
  width: var(--vinyl-size);
  z-index: 10;
}

.vinyl__shadow,
.vinyl__circle {
  border-radius: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.vinyl__shadow {
  box-shadow: 2px 8px 15px rgba(0, 0, 0, 0.2);
  z-index: 5;       
}

.vinyl__circle {
  animation: rotate-vinyl 3s linear infinite both paused;
  background-color: #1e1b1b;
  background-image: radial-gradient(circle, #2c2727 10%, transparent 10%), 
                    repeating-radial-gradient(circle, #2c2727, #1e1b1b 2px, #2c2727 4px);
  z-index: 10;
  transition: box-shadow var(--transition-time) var(--transition-method);
}

.player:hover .vinyl {
  left: 60%;
}

.player:hover .vinyl__circle {
  animation-play-state: running;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35), 0 0 50px rgba(3, 3, 3, 0.35);
}

.vinyl__center {
  transform: translate(-50%, -50%);
  background-color: #292424;
  border-radius: 100%;
  height: var(--vinyl-center-size);
  left: 50%;
  position: absolute;
  top: 50%;
  width: var(--vinyl-center-size);
}

.vinyl__center::before,
.vinyl__center::after {
  transform: translate(-50%, -50%);
  border-radius: 100%;
  content: '';
  left: 50%;
  position: absolute;
  top: 50%;
}

.vinyl__center::before {
  background-color: #e31e24;
  background-image: var(--center-bg);
  background-size: cover;
  background-position: center;
  height: calc(var(--vinyl-center-size) - 20px);
  width: calc(var(--vinyl-center-size) - 20px);
  z-index: 5;
}

.vinyl__center::after {
  background-color: #fff;
  height: 20px;
  width: 20px;
  z-index: 10;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

@keyframes rotate-vinyl {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
@endpush