@extends('layouts.site')

@section('content')
@php
  $fullTitle = $production->translate('title');
  $titlePart = $fullTitle;
  $stylePart = '';
  if (preg_match('/^(.*?)\s*\((.*?)\)\s*$/u', $fullTitle, $matches)) {
      $titlePart = trim($matches[1]);
      $stylePart = trim($matches[2]);
  }

  $contentHtml = $production->translate('content');
  
  $isYoutubeFormat = false;
  if (stripos($contentHtml, 'Provided to YouTube') !== false || stripos($contentHtml, 'Auto-generated by YouTube') !== false) {
      $isYoutubeFormat = true;
  }
  
  $trackNameParsed = null;
  $styleParsed = null;
  $distributor = null;
  $contributors = [];
  $label = null;
  $releasedOn = null;
  $remainingLines = [];
  
  if ($isYoutubeFormat) {
      $rawText = strip_tags(str_replace(['<p>', '</p>', '<br>', '<br />', '<br/>'], ["\n", "\n", "\n", "\n", "\n"], $contentHtml));
      $lines = array_filter(array_map('trim', explode("\n", $rawText)));
      
      foreach ($lines as $line) {
          if (empty($line)) continue;
          
          if (preg_match('/Provided to YouTube by\s+(.+)/i', $line, $m)) {
              $distributor = trim($m[1]);
          }
          elseif (strpos($line, '·') !== false) {
              $parts = array_map('trim', explode('·', $line));
              if (count($parts) > 0) {
                  $trackPart = $parts[0];
                  if (preg_match('/^(.*?)\s*\((.*?)\)\s*$/u', $trackPart, $tm)) {
                      $trackNameParsed = trim($tm[1]);
                      $styleParsed = trim($tm[2]);
                  } else {
                      $trackNameParsed = $trackPart;
                  }
                  
                  for ($i = 1; $i < count($parts); $i++) {
                      $contributors[] = $parts[$i];
                  }
              }
          }
          elseif (preg_match('/℗\s*(.+)/u', $line, $m)) {
              $label = trim($m[1]);
          }
          elseif (preg_match('/Released on:\s*(.+)/i', $line, $m)) {
              $releasedOn = trim($m[1]);
          }
          elseif (stripos($line, 'Auto-generated by YouTube') !== false) {
              // Skip line
          }
          elseif (stripos($line, 'YouTube\'da İzle') !== false || stripos($line, 'Watch on YouTube') !== false) {
              // Skip line
          }
          else {
              $normLine = trim(strtolower($line));
              $normTitle = trim(strtolower($production->translate('title')));
              if ($normLine === $normTitle || ($trackNameParsed && $normLine === trim(strtolower($trackNameParsed)))) {
                  continue;
              }
              $remainingLines[] = $line;
          }
      }
  }
@endphp

<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">{{ $titlePart }}</h1>
          @if($stylePart || $styleParsed)
          <p class="lead !text-[1.15rem] !mb-4 font-semibold text-[#747ed1]">{{ $stylePart ?: $styleParsed }}</p>
          @endif
          @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" title="{{ $titlePart }}">{{ $titlePart }}</div>
                  <div class="player__album has-fade-in" title="{{ $stylePart ?: ($production->translate('client_name') ?: __('music_productions.card_category_default')) }}">{{ $stylePart ?: ($production->translate('client_name') ?: __('music_productions.card_category_default')) }}</div>
                  <div class="player__track has-fade-in">
                    @if($production->production_date)
                      {{ $production->production_date->format('d.m.Y') }}
                    @else
                      &nbsp;
                    @endif
                  </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

          {{-- Hidden Background YouTube Player --}}
          @if($videoId)
          <div id="hidden-youtube-player-container" style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; left: -9999px;">
            <div id="hidden-youtube-player"></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">
         

                {{-- Sidebar - Date & Client --}}
{{-- Premium Metadata Table --}}
<div class="prod-meta-card">
  <table class="prod-meta-table">
   
    <tbody>
      <tr>
        <td class="prod-meta-label"><i class="uil uil-music"></i> {{ __("music_productions.track") }}</td>
        <td class="prod-meta-value">{{ $trackNameParsed ?? $titlePart }}</td>
      </tr>
      @if($styleParsed)
      <tr>
        <td class="prod-meta-label"><i class="uil uil-layer-group"></i> {{ __("music_productions.style") }}</td>
        <td class="prod-meta-value"><span class="prod-meta-badge">{{ $styleParsed }}</span></td>
      </tr>
      @endif
      @if(!empty($contributors))
      <tr>
        <td class="prod-meta-label"><i class="uil uil-users-alt"></i> {{ __("music_productions.contributors") }}</td>
        <td class="prod-meta-value">{{ implode(', ', $contributors) }}</td>
      </tr>
      @endif
      @if($releasedOn)
      <tr>
        <td class="prod-meta-label"><i class="uil uil-calendar-alt"></i> {{ __("music_productions.released_on") }}</td>
        <td class="prod-meta-value">{{ \Carbon\Carbon::parse($releasedOn)->format('d.m.Y') }}</td>
      </tr>
      @endif
    
      @if($label)
      <tr>
        <td class="prod-meta-label"><i class="uil uil-record-audio"></i> {{ __("music_productions.label") }}</td>
        <td class="prod-meta-value">{{ $label }}</td>
      </tr>
      @endif
      @if($production->spotify_url)
      <tr>
        <td class="prod-meta-label"><i class="uil uil-headphones"></i> Spotify</td>
        <td class="prod-meta-value">
          <a href="{{ $production->spotify_url }}" target="_blank" rel="noopener noreferrer" class="prod-platform-btn prod-platform-btn--spotify">
            <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
            {{ __('music_productions.spotify_listen_on_spotify') }}
          </a>
        </td>
      </tr>
      @endif
      @if($production->youtube_url)
      <tr>
        <td class="prod-meta-label"><i class="uil uil-youtube"></i> {{ __("music_productions.youtube") }}</td>
        <td class="prod-meta-value">
          <a href="{{ $production->youtube_url }}" target="_blank" rel="noopener noreferrer" class="prod-platform-btn prod-platform-btn--youtube">
            <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
            {{ __('music_productions.youtube_watch_on_youtube') }}
          </a>
        </td>
      </tr>
      @endif
    </tbody>
  </table>
</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: 550ms;
  --transition-method: cubic-bezier(0.34, 1.56, 0.64, 1);
  --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: 135%;
  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;
}

/* ===== Premium Metadata Table ===== */
.prod-meta-card {
  margin: 2.5rem auto;
  max-width: 720px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(30, 34, 40, 0.08);
  border: 1px solid rgba(164,174,198,0.18);
  background: #fff;
}

.prod-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.prod-meta-table thead tr {
  background: linear-gradient(90deg, #343f52 0%, #4a5568 100%);
  color: #fff;
}

.prod-meta-table thead th {
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.prod-meta-table thead th i {
  margin-right: 0.4rem;
  opacity: 0.8;
}

.prod-meta-table tbody tr {
  transition: background 0.18s ease;
  border-bottom: 1px solid rgba(164,174,198,0.12);
}

.prod-meta-table tbody tr:last-child {
  border-bottom: none;
}

.prod-meta-table tbody tr:nth-child(even) {
  background: #f8f9fc;
}

.prod-meta-table tbody tr:hover {
  background: #eef1f9;
}

.prod-meta-label {
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  color: #343f52;
  white-space: nowrap;
  width: 36%;
  vertical-align: middle;
}

.prod-meta-label i {
  margin-right: 0.45rem;
  color: #e31e24;
  font-size: 1rem;
  vertical-align: middle;
}

.prod-meta-value {
  padding: 0.85rem 1.25rem;
  color: #60697b;
  vertical-align: middle;
  line-height: 1.6;
}

.prod-meta-badge {
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: 50rem;
  background: rgba(116, 126, 209, 0.12);
  color: #747ed1;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.prod-platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 1rem;
  border-radius: 50rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.22s ease;
  border: 1.5px solid transparent;
}

.prod-platform-btn--spotify {
  background: rgba(30, 215, 96, 0.1);
  color: #1db954;
  border-color: rgba(30, 215, 96, 0.25);
}

.prod-platform-btn--spotify:hover {
  background: #1db954;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 215, 96, 0.35);
}

.prod-platform-btn--youtube {
  background: rgba(227, 30, 36, 0.08);
  color: #e31e24;
  border-color: rgba(227, 30, 36, 0.2);
}

.prod-platform-btn--youtube:hover {
  background: #e31e24;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(227, 30, 36, 0.35);
}

@media (max-width: 576px) {
  .prod-meta-table {
    display: block;
    overflow-x: auto;
  }
  .prod-meta-label {
    width: auto;
    white-space: normal;
  }
}
</style>
@endpush

@push('scripts')
<script>
// Load YouTube Iframe Player API dynamically
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytPlayer;
var isPlayerReady = false;

window.onYouTubeIframeAPIReady = function() {
    ytPlayer = new YT.Player('hidden-youtube-player', {
        height: '1',
        width: '1',
        videoId: "{{ $videoId }}",
        playerVars: {
            'autoplay': 0,
            'controls': 0,
            'disablekb': 1,
            'fs': 0,
            'modestbranding': 1,
            'rel': 0,
            'showinfo': 0
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    isPlayerReady = true;
    
    // Check if auto-play was active from previous page
    const autoPlayActive = localStorage.getItem('vinyl_auto_play') === 'true';
    if (autoPlayActive) {
        startPlayback();
    }
}

function onPlayerStateChange(event) {
    const playerEl = document.getElementById('detail-vinyl-player');
    if (!playerEl) return;

    if (event.data === YT.PlayerState.PLAYING) {
        playerEl.classList.add('player--playing');
        localStorage.setItem('vinyl_auto_play', 'true');
    } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {
        playerEl.classList.remove('player--playing');
        if (event.data === YT.PlayerState.ENDED) {
            localStorage.setItem('vinyl_auto_play', 'false');
        }
    }
}

function startPlayback() {
    if (isPlayerReady && ytPlayer && typeof ytPlayer.playVideo === 'function') {
        ytPlayer.playVideo();
    }
}

function pausePlayback() {
    if (isPlayerReady && ytPlayer && typeof ytPlayer.pauseVideo === 'function') {
        ytPlayer.pauseVideo();
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const playBtn = document.getElementById('play-cd-btn');
    const playerEl = document.getElementById('detail-vinyl-player');

    if (playBtn) {
        playBtn.addEventListener('click', function(e) {
            e.preventDefault();
            if (!isPlayerReady) return;

            if (playerEl.classList.contains('player--playing')) {
                pausePlayback();
                localStorage.setItem('vinyl_auto_play', 'false');
            } else {
                startPlayback();
                localStorage.setItem('vinyl_auto_play', 'true');
            }
        });
    }

    // Capture next/prev clicks to persist play state
    const prevBtn = document.querySelector('.player__controls-item--prev');
    const nextBtn = document.querySelector('.player__controls-item--next');

    [prevBtn, nextBtn].forEach(btn => {
        if (btn && btn.tagName === 'A') {
            btn.addEventListener('click', function() {
                if (playerEl && playerEl.classList.contains('player--playing')) {
                    localStorage.setItem('vinyl_auto_play', 'true');
                } else {
                    localStorage.setItem('vinyl_auto_play', 'false');
                }
            });
        }
    });
});
</script>
@endpush
@endsection