@extends('layouts.site')

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

@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-60 lg:pb-60 md:pb-60 !text-center">
    <div class="flex flex-wrap mx-[-15px]">
      <div class="md:w-10/12 lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
        <div class="post-header">
          @if($production->client_name)
          <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] 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-[#e31e24]">
            <span>{{ $production->translate('client_name') }}</span>
          </div>
          @endif
          <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ $production->translate('title') }}</h1>
          @if($production->production_date)
          <p class="lead !leading-[1.65] text-[.9rem] font-medium text-[#60697b]">
            <i class="uil uil-calendar-alt before:content-['\e9ba'] !mr-1"></i>
            {{ $production->production_date->format('d.m.Y') }}
          </p>
          @endif
        </div>
      </div>
    </div>
  </div>
</section>

<div class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
  <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
    <div class="flex flex-wrap mx-[-15px]">
      <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
        <article class="!mt-[-12.5rem]">
          {{-- Cover Image --}}
          @if($production->cover_image_url)
          <figure class="!rounded-[.4rem] !mb-8 xl:!mb-[3.5rem] lg:!mb-[3.5rem] md:!mb-[3.5rem] overflow-hidden shadow-lg">
            <img class="!rounded-[.4rem] w-full" src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}">
          </figure>
          @endif

          {{-- Content & Meta --}}
          <div class="flex flex-wrap mx-[-15px]">
            <div class="xl:w-10/12 xl:!ml-[8.33333333%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
              <h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-4">{{ __('music_productions.project_details') }}</h2>
              <div class="flex flex-wrap mx-0">
                {{-- Content column --}}
                <div class="xl:w-9/12 lg:w-9/12 md:w-9/12 w-full flex-[0_0_auto] max-w-full">
                  <div class="music-production-content prose max-w-none">
                    {!! $production->translate('content') !!}
                  </div>
                </div>

                {{-- Sidebar - Date & Client --}}
                <div class="xl:w-2/12 lg:w-2/12 md:w-2/12 w-full flex-[0_0_auto] max-w-full !ml-auto">
                  <ul class="pl-0 list-none">
                    @if($production->production_date)
                    <li>
                      <h5 class="!mb-1">{!! t('Tarih') !!}</h5>
                      <p>{{ $production->production_date->format('d M Y') }}</p>
                    </li>
                    @endif
                    @if($production->client_name)
                    <li>
                      <h5 class="!mb-1">{!! t('Müşteri') !!}</h5>
                      <p>{{ $production->translate('client_name') }}</p>
                    </li>
                    @endif
                    @if($production->spotify_url)
                    <li>
                      <h5 class="!mb-1">Spotify</h5>
                      <p>
                        <a href="{{ $production->spotify_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-primary !rounded-[50rem]">
                          {{ __('music_productions.spotify_listen_on_spotify') }}
                        </a>
                      </p>
                    </li>
                    @endif
                  </ul>
                  <a href="{{ route('music-productions.index') }}" class="more hover">
                    <i class="uil uil-arrow-left before:content-['\e949'] !mr-1"></i>
                    {{ __('music_productions.back_to_list') }}
                  </a>
                </div>
              </div>
            </div>
          </div>

          {{-- Gallery --}}
          @php
            $gallery = $production->gallery;
          @endphp
          @if(!empty($gallery) && is_array($gallery) && count($gallery) > 0)
          <div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[25px]">
            @foreach($gallery as $galleryImage)
            <div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
              <figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
                <a href="{{ asset('storage/' . $galleryImage) }}" data-glightbox data-gallery="music-production-gallery">
                  <img class="transition-all duration-[0.35s] ease-in-out group-hover:scale-105 !rounded-[.4rem] w-full" src="{{ asset('storage/' . $galleryImage) }}" alt="{{ $production->translate('title') }}">
                </a>
              </figure>
            </div>
            @endforeach
          </div>
          @endif

        </article>
      </div>
    </div>
  </div>
</div>

{{-- Post Navigation (Prev / Next) --}}
<div class="wrapper !bg-[#ffffff]">
  <div class="container py-10">
    <div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-15px] xl:!mt-0 lg:!mt-0 md:!mt-0">
      <div class="xl:w-8/12 lg:w-8/12 md:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full self-center text-center xl:text-left lg:text-left md:text-left navigation">
        @if($prev)
        <a href="{{ route('music-productions.show', $prev->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 !mr-[.25rem] hover:translate-y-[-0.15rem]">
          <i class="uil uil-arrow-left before:content-['\e949']"></i> {{ __('music_productions.prev') }}
        </a>
        @endif
        @if($next)
        <a href="{{ route('music-productions.show', $next->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-end hover:translate-y-[-0.15rem] !mb-0">
          {{ __('music_productions.next') }} <i class="uil uil-arrow-right before:content-['\e94c']"></i>
        </a>
        @endif
      </div>
      <aside class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full max-md:!mt-[15px] sidebar text-center xl:text-right lg:text-right md:text-right">
        <a href="{{ route('music-productions.index') }}" class="btn btn-soft-primary !rounded-[50rem] btn-icon btn-icon-start hover:translate-y-[-0.15rem] !mb-0">
          <i class="uil uil-apps before:content-['\e93e']"></i> {{ __('music_productions.back_to_list') }}
        </a>
      </aside>
    </div>
  </div>
</div>

@push('styles')
<style>
/* Content styling */
.music-production-content p {
  margin-bottom: 1rem;
  line-height: 1.75;
}
.music-production-content img {
  border-radius: 0.4rem;
  max-width: 100%;
  height: auto;
}
.music-production-content h2,
.music-production-content h3,
.music-production-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Gallery hover effect */
.cursor-dark figure {
  transition: box-shadow 0.3s ease;
}
.cursor-dark:hover figure {
  box-shadow: 0 0.5rem 2rem rgba(30,34,40,0.12);
}

/* Entrance animation */
article {
  animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
@endpush
@endsection