@extends('front.layouts.main')
@section('content')

<div class="container portfolio-container">
    <div class="protfolio-wrapper px-xs-2 px-4 mt-3 inner-page">
      <div class="row gx-sm-5  gy-4 gy-sm-0 scroll-id" id="1">
        <div class="col-sm-6 image-wrapper wow  fadeInUp" data-wow-delay="0.2s">
          <div class="relative">
            <img src="{{ asset('storage/' . $project->image) }}" alt="Matinee" class="img-responsive">
            @if($project->youtube_video_id)
              <span class="play-btn" id="mv-3" data-video-id="{{$project->youtube_video_id}}">
                Watch Trailer
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="16" height="16">
                  <polygon class="play-btn__svg" points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69"/>
                  <path class="play-btn__svg" d="M26,13A13,13,0,1,1,13,0,13,13,0,0,1,26,13ZM13,2.18A10.89,10.89,0,1,0,23.84,13.06,10.89,10.89,0,0,0,13,2.18Z"/>
                </svg> 
              </span>
            @endif
          </div>
        </div>
        <div class=" col-sm-6 col-xs-12" id="film-591">
          <div class="movies_right">
            <h1 class="common_head wow  fadeInUp" data-wow-delay="0.2s">{{$project->name}}</h1>
            <div class="row gy-4 mb-4">
              <div class="col-md-6 col-xs-12 ">
                <div class="movie-info wow  fadeInUp" data-wow-delay="0.4s">
                  <h6>Release : &nbsp;</h6>
                  <p>{{$project->release_date ? formatDateHelper($project->release_date, 'F d, Y') : 'TBD'}}</p>
                </div>
              </div>
              <div class=" col-md-6  col-xs-12">
                <div class="movie-info wow  fadeInUp" data-wow-delay="0.6s">
                  <h6>Writers : &nbsp;</h6>
                  <p>{{$project->writers}}</p>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-xs-12 mb-2">
              <div class="movie-info wow  fadeInUp" data-wow-delay="0.6s">
                <h6>DIRECTOR : &nbsp</h6>
                <p>{{$project->director}}</p>
              </div>
            </div>
            <div class="col-sm-12 col-xs-12  mb-2">
              <div class="movie-info wow  fadeInUp" data-wow-delay="0.8s">
                <h6>STARRING : &nbsp;</h6>
               <p>{{$project->music_director}}
                  <!-- {{$project->music_partner}}<br> -->
                  <!-- {{$project->music_director}}<br> -->
                </p>
              </div>
            </div>

            <div class="col-sm-12 col-xs-12 movie-description wow  fadeInUp" data-wow-delay="1s">
              {!! $project->short_description !!}
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12 col-xs-12 movie-description wow  fadeInUp" data-wow-delay="0.4s">
         {!! $project->description !!} 

          <div class="col-12">
          @if(count($project->blogs) > 0)
            <h1 class="common_head py-5 py-sm-4 border-bottom"><span>Articles</span></h1>
            @foreach($project->blogs as $i => $blog)
                 @php
                    $title = str_replace('<p><br></p>', '', $blog->title);
                    $description = str_replace('<p><br></p>', '', $blog->description);
                 @endphp
                <div class="blog-ninth blog wow  fadeInUp" data-wow-delay="0.2s">
                    <div class="blog-img wow  fadeInUp" data-wow-delay="0.2s">
                        <h2>{{formatDateHelper($blog->date, 'M d, Y')}}</h2>
                    </div>
                     <div class="blog-content wow  fadeInUp" data-wow-delay="0.4s">
                        <h1 class="blog-heading wow  fadeInUp" data-wow-delay="0.6s">{!! $title !!} </h1>
                        <div class="blog-description wow  fadeInUp" data-wow-delay="0.8s">{!! $description !!}</div>
                        <a  href="{{$blog->redirect_link}}" class="blog-btn wow  fadeInUp" data-wow-delay="1s"><span class="qodef-m-text">Read More</span></a>

                    </div>
                </div>
              @endforeach
          @endif      
         </div>
      </div>
    </div>

    <div id="videoModal">
      <span id="closeModal">&times;</span>
      <div class="wrapper-box-modal">
        <iframe id="videoFrame" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media"
          allowfullscreen></iframe>
      </div>
    </div>
 
  </div>

  <div class="sec_padd upcoming-section pb-0 trailer-sec" style="display: none">
        <section class="section-2">
          <div class="container portfolio-container mb-4">
            <div class="row">
              <div class="col-sm-12 col-xs-12">
                <div class=" px-4">
                  <h2 class="">Watch Trailer</h2>
                </div>
              </div>
            </div>
          </div>
          <div class="animation-container container portfolio-container">
            <!-- <img src="images/slide2.webp" class="image-behind" alt="Scrolling Image"> -->
            <div class="image-behind px-4">
              <iframe width="100%" height="703" src="https://www.youtube.com/embed/{{ $project->youtube_video_id }}"
            title="Eleanor The Great Trailer 2025 || June Squibb, Chiwetel Ejiofor" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
             </div>
          </div>
        </section>
  </div>

@endsection