@extends('layouts.base')
@section('title')
    Press Release
@endsection

@section('content')

<!-- Banner/Header Section -->
<div class="row">
    <div class="col-sm-12 my-auto text-center backimghead"
       style="background: linear-gradient(rgba(84, 51, 34, 0.78), rgba(84, 51, 34, 0.788)), url('{{ asset('img/bdc.jpeg') }}') center/cover; height: 430px;"
        center/cover; height: 430px;">
        <h2 style="padding-top: 210px; color:white;"
            class="fw-bold text-uppercase heading21 headerinner">
             Press Release
        </h2>
        <span style="color:white; font-family: Lexend, serif;" class="fw-bold subheading">
            <a href="{{ asset('/') }}" style="text-decoration: none; color:white;">HOME</a>
            &nbsp;/&nbsp;
            <a href="#" style="color:white; text-decoration: none;" class="text-uppercase">
                 Press Release
            </a>
        </span>
    </div>
</div>

<!-- Testimonials Section -->
<section class="testimonial-section py-5">
    <div class="container">

        <!-- Section Heading -->
        <div class="text-center mb-5">
          
            <h2 class="fw-bold mt-2" style="color:rgb(84,51,34);">
              Press Release
            </h2>
            <div class="mx-auto mt-3"
                style="width:90px; height:3px; background:#ff6600; border-radius:10px;"></div>
        </div>

<div class="row g-4">
    @foreach($testimonial as $item)
        @php
            $videoUrl = trim($item->youtube_url ?? '');

            $youtubeId = null;
            $driveId = null;

            if (!empty($videoUrl)) {

                // YouTube extract
                if (preg_match('~(?:youtube\.com/(?:watch\?v=|embed/)|youtu\.be/)([A-Za-z0-9_-]{11})~', $videoUrl, $matches)) {
                    $youtubeId = $matches[1];
                }

                // Google Drive extract (file/d/ID OR open?id=ID)
                if (preg_match('~drive\.google\.com/(?:file/d/|open\?id=)([^/?&]+)~', $videoUrl, $matches)) {
                    $driveId = $matches[1];
                }

                // fallback (only ID pasted)
                if (!$driveId && preg_match('~^[A-Za-z0-9_-]{20,}$~', $videoUrl)) {
                    $driveId = $videoUrl;
                }
            }
        @endphp

        <div class="col-lg-4 col-md-6">
            <div class="testimonial-card h-100">

                {{-- VIDEO --}}
                @if($item->type == 'video')
                    <div class="video-wrapper">
                        <div class="ratio ratio-16x9">

                            {{-- YouTube --}}
                            @if($youtubeId)
                                <iframe
                                    src="https://www.youtube.com/embed/{{ $youtubeId }}"
                                    title="{{ $item->title }}"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen>
                                </iframe>

                            {{-- Google Drive --}}
                            @elseif($driveId)
                                <iframe
                                    src="https://drive.google.com/file/d/{{ $driveId }}/preview"
                                    title="{{ $item->title }}"
                                    allow="autoplay"
                                    allowfullscreen>
                                </iframe>

                            {{-- Direct Video --}}
                            @elseif(!empty($videoUrl))
                                <video controls class="w-100 h-100" style="object-fit: cover;">
                                    <source src="{{ $videoUrl }}">
                                    Your browser does not support the video tag.
                                </video>
                            @endif

                        </div>
                    </div>
                @endif

                {{-- PHOTO --}}
                @if($item->type == 'photo' && !empty($item->photo))
                    <div class="image-wrapper">
                        <img src="{{ asset('upload/testimonials/'.$item->photo) }}"
                             class="img-fluid rounded testimonial-img"
                             style="height:300px;width:100%;object-fit:cover;cursor:pointer;"
                             alt="{{ $item->title }}"
                             data-bs-toggle="modal"
                             data-bs-target="#imageModal"
                             data-img="{{ asset('upload/testimonials/'.$item->photo) }}">
                    </div>
                @endif

                {{-- TITLE --}}
                <div class="testimonial-content text-center mt-2">
                    <h6 class="fw-bold mb-1">{{ $item->title }}</h6>
                </div>

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

{{-- IMAGE MODAL --}}
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body text-center p-0">
                <img src="" id="modalImage" class="img-fluid rounded shadow">
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const imageModal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');

    imageModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        if (!button) return;

        const imgSrc = button.getAttribute('data-img');
        modalImage.setAttribute('src', imgSrc);
    });

    imageModal.addEventListener('hidden.bs.modal', function () {
        modalImage.setAttribute('src', '');
    });
});
</script>
    </div>
</section>
<div class="modal fade" id="imageModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content bg-transparent border-0">
      
      <div class="modal-body text-center p-0">
        <img src="" id="modalImage" class="img-fluid rounded">
      </div>

    </div>
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const modalImage = document.getElementById("modalImage");

    document.querySelectorAll(".testimonial-img").forEach(img => {
        img.addEventListener("click", function () {
            const imgSrc = this.getAttribute("data-img");
            modalImage.setAttribute("src", imgSrc);
        });
    });
});
</script>
<!-- PREMIUM CSS -->
<style>
#imageModal {
    z-index: 9999 !important;
}

#imageModal .modal-dialog {
    z-index: 99999 !important;
}

.modal-backdrop {
    z-index: 1999 !important;
}
.testimonial-img {
    cursor: pointer;
    transition: transform 0.3s ease;
}
.testimonial-img:hover {
    transform: scale(1.05);
}
.testimonial-section {
    background: #fafafa;
}

.testimonial-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    position: relative;
}

.testimonial-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ff6600, rgb(84,51,34));
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.video-wrapper iframe {
    border-radius: 18px 18px 0 0;
}

.testimonial-content {
    padding: 20px 15px;
}

.testimonial-content h6 {
    color: rgb(84,51,34);
    font-family: 'Poppins', sans-serif;
}

@media (max-width: 576px) {
    .testimonial-content {
        padding: 15px 12px;
    }
}
</style>

@endsection