@extends('layouts.site')

@section('content')
<section class="wrapper !bg-[#edf2fc]">
  <div class="container !pt-10 !pb-36 xl:!pt-[4.5rem] lg:!pt-[4.5rem] md:!pt-[4.5rem] xl:!pb-40 lg:!pb-40 md:!pb-40 !text-center">
    <div class="flex flex-wrap mx-[-15px]">
      <div class="md:w-7/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
        <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ __('music_productions.meta-index-title') }}</h1>
        <p class="lead lg:!px-[1.25rem] xl:!px-[1.25rem] xxl:!px-[2rem] !leading-[1.65] text-[0.9rem] font-medium">{{ __('music_productions.meta-index-description') }}</p>
      </div>
    </div>
  </div>
</section>

<section class="wrapper !bg-[#ffffff]">
  <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
    @if($productions->count() > 0)
    <div class="projects-masonry !mt-[-10rem] xl:!mt-[-12rem] lg:!mt-[-12rem] md:!mt-[-10rem] !mb-10">
      <div class="flex flex-wrap mx-[-20px] xl:mx-[-25px] lg:mx-[-25px] !mt-[-2rem] xl:!mt-[-2.5rem] lg:!mt-[-2.5rem]">
        @php
          $accentColors = [
            ['border' => '#54a8c7', 'text' => '#54a8c7', 'tooltip' => 'itooltip-aqua'],
            ['border' => '#747ed1', 'text' => '#747ed1', 'tooltip' => 'itooltip-purple'],
            ['border' => '#fab758', 'text' => '#fab758', 'tooltip' => 'itooltip-yellow'],
            ['border' => '#e2626b', 'text' => '#e2626b', 'tooltip' => 'itooltip-red'],
            ['border' => '#f78b77', 'text' => '#f78b77', 'tooltip' => 'itooltip-orange'],
            ['border' => '#7cb798', 'text' => '#7cb798', 'tooltip' => 'itooltip-leaf'],
            ['border' => '#d16b86', 'text' => '#d16b86', 'tooltip' => 'itooltip-pink'],
            ['border' => '#45c4a0', 'text' => '#45c4a0', 'tooltip' => 'itooltip-green'],
            ['border' => '#a07cc5', 'text' => '#a07cc5', 'tooltip' => 'itooltip-violet'],
          ];
        @endphp
        @foreach($productions as $index => $production)
          @php
            $color = $accentColors[$index % count($accentColors)];
          @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 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)] transition-all duration-300 hover:!shadow-[0_0.5rem_2.5rem_rgba(30,34,40,0.12)] hover:translate-y-[-0.15rem]">
              <figure class="card-img-top overflow-hidden rounded-t group {{ $color['tooltip'] }}" title='<h5 class="!mb-0">{!! t("Detayları Görüntüle") !!}</h5>'>
                <a href="{{ route('music-productions.show', $production->slug) }}">
                  @if($production->cover_image_url)
                    <img class="transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}">
                  @else
                    <div class="bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center" style="height: 250px;">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-16 h-16 text-gray-400">
                        <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>
                    </div>
                  @endif
                </a>
              </figure>
              <div class="card-body p-7">
                <div class="post-header">
                  @if($production->client_name)
                  <div 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 !mb-2" style="color: {{ $color['text'] }}; --tw-before-bg: {{ $color['border'] }}; before:bg-[{{ $color['border'] }}];">
                    <span style="color: {{ $color['text'] }}">{{ $production->translate('client_name') }}</span>
                  </div>
                  @endif
                  @if($production->production_date)
                  <div class="text-[0.65rem] text-[#aab0bc] !mb-1">
                    {{ $production->production_date->format('d.m.Y') }}
                  </div>
                  @endif
                  <h3 class="!mb-0">
                    <a href="{{ route('music-productions.show', $production->slug) }}" class="hover:text-[{{ $color['text'] }}] transition-colors duration-200">
                      {{ $production->translate('title') }}
                    </a>
                  </h3>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>

    {{-- Pagination --}}
    @if($productions->hasPages())
    <div class="flex justify-center !mt-8">
      <nav class="pagination-wrapper">
        {{ $productions->links() }}
      </nav>
    </div>
    @endif

    @else
    <div class="!mt-[-8rem] !mb-10 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">{{ __('music_productions.empty') }}</p>
      </div>
    </div>
    @endif
  </div>
</section>

@push('styles')
<style>
/* Accent line color for category labels */
.text-line::before {
  background-color: currentColor !important;
}

/* Custom pagination styling */
.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: #e31e24;
  border-color: #e31e24;
  color: #fff;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.25rem 0.75rem rgba(227,30,36,0.25);
}
.pagination-wrapper .pagination li.active span,
.pagination-wrapper .pagination li span[aria-current="page"] {
  background: #e31e24;
  border-color: #e31e24;
  color: #fff;
}
.pagination-wrapper .pagination li.disabled span {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Masonry item entrance animation */
.project.item {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@for($i = 0; $i < 9; $i++)
.project.item:nth-child({{ $i + 1 }}) {
  animation-delay: {{ $i * 0.1 }}s;
}
@endfor
</style>
@endpush
@endsection