@extends('front.layout.app')

@section('content')
@php $settingArr = settingArr(); @endphp
@php echo cms_edit_page('cms',$company_news->id); @endphp

<div class="career pagetitle">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Company News and Highlight</h1>
            </div>
        </div>
    </div>
</div>

<main id="main">

    {{-- TOP SECTION --}}
    <div class="project-status">
        <div class="container">
            <div class="row align-items-md-center">

                <div class="col-md-6">
                    {!! adjustUrl($company_news->content) !!}
                </div>

                <div class="col-md-6">
                    <div class="video">
                        <img src="{{ asset_uploads('') . 'module/cms/' . $company_news->featured_img }}" alt="Video">

                        <a href="https://www.youtube.com/watch?v=QNgJjm0JX7Y"
                           data-fancybox="main-video"
                           data-type="iframe"
                           class="btn-play">
                            <span class="ico"></span>
                        </a>

                    </div>
                </div>

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


    {{-- GALLERY --}}
    <div class="career-gallery">
        <div class="container">

            <div class="row">
                <div class="col-sm-12">
                    <div class="head">
                        <h2>Building Progress & Highlights</h2>
                    </div>
                </div>
            </div>

            <div class="row g-4" id="gallery-container">

                {{-- IMAGES --}}
                @forelse($cmsModuleDataImages as $image)

                    <div class="col-lg-4 col-md-6 gallery-item"
                         id="image_id_{{ $loop->iteration }}">

                        <a href="{{ $image->main }}"
                           data-fancybox="media-gallery"
                           data-type="image"
                           class="gallery-link">

                            <img src="{{ $image->thumb }}"
                                 alt="{{ $image->image_alt }}"
                                 class="img-fluid w-100">

                        </a>

                    </div>

                @empty
                    <div class="col-12 text-center">
                        <p>No images found.</p>
                    </div>
                @endforelse


                {{-- VIDEOS (ONLY THUMBNAIL SHOWN) --}}
                @foreach($cmsModuleDataVideos as $video)

                    @php
                        $isYoutube = str_contains($video->video, 'youtube') || str_contains($video->video, 'youtu.be');
                    @endphp

                    <div class="col-lg-4 col-md-6 col-sm-6 mb-4">

                        <a href="{{ $video->video }}"
                           data-fancybox="media-gallery"
                           data-type="{{ $isYoutube ? 'iframe' : 'html5video' }}"
                           class="video-thumb">

                            <div class="video-box">

                                <img src="{{ $video->thumb }}"
                                     class="img-fluid"
                                     alt="Video Thumbnail">

                                <div class="play-icon">
                                    <i class="fas fa-play"></i>
                                </div>

                            </div>

                        </a>

                    </div>

                @endforeach

            </div>

        </div>
    </div>

</main>
@endsection


@section('beforeBodyClose')

{{-- FANCYBOX --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.css"/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script>

<script>
Fancybox.bind("[data-fancybox='media-gallery']", {
    Carousel: {
        infinite: false
    }
});
</script>

<style>
.video-box {
    position: relative;
    overflow: hidden;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}
</style>

@endsection