@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-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-[#74788d] 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]">
          @php
            $videoId = null;
            if ($production->youtube_video_id) {
                $videoId = $production->youtube_video_id;
            } elseif ($production->youtube_url) {
                if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $production->youtube_url, $match)) {
                    $videoId = $match[1];
                }
            }
          @endphp

          {{-- Vinyl Player Mockup --}}
          @if($production->cover_image_url)
          <div class="player-container flex justify-center !mb-12 xl:!mb-16">
              <div class="player player--open" id="detail-vinyl-player" data-player>
                <div class="player__content">
                  <div class="player__artist has-fade-in">{{ $production->translate('client_name') ?: __('music_productions.card_category_default') }}</div>
                  <div class="player__album has-fade-in">
                    @if($production->production_date)
                      {{ $production->production_date->format('Y') }}
                    @else
                      &nbsp;
                    @endif
                  </div>
                  <div class="player__track has-fade-in">{{ $production->translate('title') }}</div>

                  <div class="album" data-album>
                    <div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
                    <div class="vinyl">
                      <div class="vinyl__shadow"></div>
                      <div class="vinyl__circle">
                        <div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url }}')"></div>
                      </div> 
                    </div>
                  </div>

                  <div class="player__controls has-fade-in">
                    @if($prev)
                    <a href="{{ route('music-productions.show', $prev->slug) }}" class="player__controls-item player__controls-item--prev" title="{{ __('music_productions.prev') }}"></a>
                    @else
                    <div class="player__controls-item player__controls-item--prev opacity-30 cursor-not-allowed"></div>
                    @endif
                    
                    <div class="player__controls-item player__controls-item--play" id="play-cd-btn" title="{{ __('music_productions.youtube_watch_on_youtube') }}">
                      <div class="rectangle"></div>
                      <div class="triangle"></div>
                    </div>

                    @if($next)
                    <a href="{{ route('music-productions.show', $next->slug) }}" class="player__controls-item player__controls-item--next" title="{{ __('music_productions.next') }}"></a>
                    @else
                    <div class="player__controls-item player__controls-item--next opacity-30 cursor-not-allowed"></div>
                    @endif
                  </div>
                </div>
              </div>
          </div>
          @endif

          {{-- YouTube Lightbox Modal --}}
          @if($videoId)
          <div id="youtube-lightbox" class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/90 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300">
            <div class="absolute inset-0" id="lightbox-bg"></div>
            <div class="relative w-full max-w-4xl mx-4 aspect-video z-10 scale-95 opacity-0 transition-all duration-300" id="lightbox-content">
              <button id="lightbox-close" class="absolute -top-12 right-0 text-white hover:text-red-500 transition-colors text-2xl flex items-center gap-1 font-semibold focus:outline-none">
                <i class="uil uil-times before:content-['\eb50']"></i> {{ t('Kapat') }}
              </button>
              <div class="w-full h-full rounded-lg overflow-hidden shadow-2xl bg-black border border-white/10">
                <iframe id="lightbox-iframe" class="w-full h-full border-0" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>
            </div>
          </div>
          @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-3/12 lg:w-3/12 md:w-3/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 class="!mb-3">
                      <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] w-full text-center">
                          {{ __('music_productions.spotify_listen_on_spotify') }}
                        </a>
                      </p>
                    </li>
                    @endif
                    @if($production->youtube_url)
                    <li class="!mb-3">
                      <h5 class="!mb-1">YouTube</h5>
                      <p>
                        <a href="{{ $production->youtube_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-red !rounded-[50rem] w-full text-center" style="background-color: rgba(227, 30, 36, 0.1); color: #e31e24;">
                          {{ __('music_productions.youtube_watch_on_youtube') }}
                        </a>
                      </p>
                    </li>
                    @endif
                  </ul>
                  <a href="{{ route('music-productions.index') }}" class="more hover mt-4 inline-block">
                    <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>
/* --- 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: 310px;
  --vinyl-offset: 20px;
  --vinyl-size: calc(var(--album-size) - var(--vinyl-offset));
  --vinyl-center-size: 130px;
}

.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 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--open::after {
  opacity: 0.6;
}

.player .player__content {
  background-color: var(--color-white);
  height: 100%;
  padding: 70px 20px 0 20px;
  position: relative;
  text-align: left;
  width: 100%;
  z-index: 10;
  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);
}

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

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

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

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

.player--open {
  border-radius: 8px;
  height: 320px;
  position: relative;
  width: 440px;
}

.player__controls {
  position: absolute;
  bottom: 25px;
  left: 20px;
  text-align: left;
  white-space: nowrap;
  width: 180px;
  z-index: 15;
}

.player__controls-item {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  display: inline-block;
  height: 26px;
  margin-right: 15px;
  position: relative;
  width: 26px;
  vertical-align: middle;
}

.player__controls-item--play {
  overflow: hidden;
}

.player__controls-item--play .rectangle,
.player__controls-item--play .triangle {
  height: 26px;
  left: 0;
  position: absolute;
  top: 0;
  width: 26px;
}

.player__controls-item--play .rectangle {
  z-index: 5;
}

.player__controls-item--play .rectangle::before,
.player__controls-item--play .rectangle::after {
  transition: all 0.3s ease;
  background-color: #e31e24;
  content: '';
  height: 100%;
  width: 50%;
}

.player--playing .player__controls-item--play .rectangle::before,
.player--playing .player__controls-item--play .rectangle::after {
  width: 30%;
}

.player__controls-item--play .rectangle::before {
  float: left;
  overflow: hidden;
}

.player__controls-item--play .rectangle::after {
  float: right;
}

.player__controls-item--play .triangle {
  z-index: 10;
}

.player__controls-item--play .triangle::before,
.player__controls-item--play .triangle::after {
  transition: all 0.3s ease;
  background-color: transparent;
  border-bottom: 13px solid transparent;
  border-right: 26px solid #fff;
  border-top: 13px solid transparent;
  content: '';
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}

.player__controls-item--play .triangle::before {
  transform: translate(0, -50%);
}

.player--playing .player__controls-item--play .triangle::before {
  transform: translate(0, -100%);
}

.player__controls-item--play .triangle::after {
  transform: translate(0, 50%);
}

.player--playing .player__controls-item--play .triangle::after {
  transform: translate(0, 100%);
}

.player__controls-item--play:hover .rectangle::before,
.player__controls-item--play:hover .rectangle::after {
  background-color: #c1181d;
}

.player__controls-item--next,
.player__controls-item--prev {
  width: 32px;
}

.player__controls-item--next::before,
.player__controls-item--next::after,
.player__controls-item--prev::before,
.player__controls-item--prev::after {
  transition: all 0.3s ease;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  content: '';
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}

.player__controls-item--next::before,
.player__controls-item--next::after {
  border-left: 16px solid #e31e24;
}

.player__controls-item--next::before {
  left: 0;
}

.player__controls-item--next::after {
  left: 10px;
}

.player__controls-item--next:hover::before,
.player__controls-item--next:hover::after {
  border-left-color: #c1181d;
}

.player__controls-item--prev::before,
.player__controls-item--prev::after {
  border-right: 16px solid #e31e24;
}

.player__controls-item--prev::before {
  right: 0;
}

.player__controls-item--prev::after {
  right: 10px;
}

.player__controls-item--prev:hover::before,
.player__controls-item--prev:hover::after {
  border-right-color: #c1181d;
}

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

.player--open .album {
  cursor: default;
  right: -80px;
}

.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;
}

.player--open .vinyl {
  left: 0 !important;
}

.player--playing .vinyl {
  left: 45% !important;
}

.player--playing .vinyl__circle {
  animation-play-state: running;
}

.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);
  }
}

.has-fade-in {
  transition: all calc(var(--transition-time) * 2) var(--transition-method);
  opacity: 0;
  pointer-events: none;
}

.player--open .has-fade-in {
  opacity: 1;
  pointer-events: auto;
}

/* 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); }
}

/* Flatten elements when lightbox is open to fix stacking context issues */
body.lightbox-open .player-container,
body.lightbox-open .player {
  transform: none !important;
  perspective: none !important;
  z-index: 1 !important;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const cdBtn = document.getElementById('play-cd-btn');
    const playerEl = document.getElementById('detail-vinyl-player');
    const lightbox = document.getElementById('youtube-lightbox');
    const lightboxBg = document.getElementById('lightbox-bg');
    const lightboxContent = document.getElementById('lightbox-content');
    const lightboxClose = document.getElementById('lightbox-close');
    const iframe = document.getElementById('lightbox-iframe');
    const videoId = "{{ $videoId }}";

    if (cdBtn && lightbox && iframe) {
        cdBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Set autoplay & enable javascript API
            iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&enablejsapi=1`;
            
            // Start vinyl spinning animation
            if (playerEl) {
                playerEl.classList.add('player--playing');
            }

            // Show lightbox container with transition
            lightbox.classList.remove('opacity-0', 'pointer-events-none');
            document.body.classList.add('lightbox-open');
            setTimeout(() => {
                lightboxContent.classList.remove('scale-95', 'opacity-0');
            }, 50);
        });

        function closeLightbox() {
            lightboxContent.classList.add('scale-95', 'opacity-0');
            lightbox.classList.add('opacity-0', 'pointer-events-none');
            document.body.classList.remove('lightbox-open');
            
            // Stop vinyl spinning animation
            if (playerEl) {
                playerEl.classList.remove('player--playing');
            }

            // Clear source to halt playback after transition completes
            setTimeout(() => {
                iframe.src = "";
            }, 300);
        }

        lightboxBg.addEventListener('click', closeLightbox);
        lightboxClose.addEventListener('click', closeLightbox);
        
        // Listen for ESC key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !lightbox.classList.contains('opacity-0')) {
                closeLightbox();
            }
        });
    }
});
</script>
@endpush
@endsection