{{--  Old Code Star  --}}

{{--   @extends('layouts.master')

@section('content')

<div class="container">

    <h1>Instagram Media</h1>

    

    <style>

        .youtube-size {

            position: relative;

            padding-bottom: 56.25%;

            height: 0;

            overflow: hidden;

        }

    

        .youtube-size iframe,

        .youtube-size video {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

        }

        .expand-image {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.9);

            display: none;

            justify-content: center;

            align-items: center;

        }

        .expand-image img {

            max-width: 90%;

            max-height: 90%;

        }

    </style>

    

    <div class="row g-4">

        @foreach($media as $item)

            <div class="col-md-3">

                <div class="card">

                    @if($item['media_type'] === 'IMAGE')

                        <div class="youtube-size">

                            <img src="{{ $item['media_url'] }}" alt="{{ isset($item['caption']) ? $item['caption'] : '' }}" class="card-img-top image-expandable" data-src="{{ $item['media_url'] }}">

                        </div>

                    @elseif($item['media_type'] === 'VIDEO')

                        <div class="youtube-size">

                            <video controls class="card-img-top">

                                <source src="{{ $item['media_url'] }}" type="video/mp4">

                                <source src="{{ $item['media_url'] }}" type="video/ogg">

                                <source src="{{ $item['media_url'] }}" type="video/webm">

                                Your browser does not support the video tag.

                            </video>

                        </div>

                    @endif

                    <div class="card-body">

                        <!-- Show only the first two lines of the caption -->

                        <p class="card-text">

                            @if(isset($item['caption']))

                                @php $caption = $item['caption']; @endphp

                                @if(strlen($caption) > 100)

                                    {{ substr($caption, 0, 100) . '...' }}

                                @else

                                    {{ $caption }}

                                @endif

                            @endif

                        </p>

                    </div>

                </div>

            </div>

        @endforeach

    </div>

    <div class="expand-image">

        <img src="" alt="" class="expanded-image">

    </div>

    

    <script>

        document.addEventListener('DOMContentLoaded', function() {

            let imageExpandables = document.querySelectorAll('.image-expandable');

            let expandedImage = document.querySelector('.expanded-image');

            let expandImageContainer = document.querySelector('.expand-image');

            

            imageExpandables.forEach(function(imageExpandable) {

                imageExpandable.addEventListener('click', function() {

                    expandedImage.src = imageExpandable.dataset.src;

                    expandImageContainer.style.display = 'flex';

                });

            });

            

            expandImageContainer.addEventListener('click', function() {

                expandImageContainer.style.display = 'none';

            });

        });

    </script>

</div>



@endsection
  --}}

{{--  Old Code End  --}}
@extends('layouts.master')

@section('content')

<div class="container">

    <h1>Instagram Media</h1>

    <style>
        .youtube-size {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }

        .youtube-size iframe,
        .youtube-size video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .expand-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
        }

        .expand-image img {
            max-width: 90%;
            max-height: 90%;
        }
    </style>

    <div class="row g-4">
        @foreach($media as $item)
            @if($loop->first || $item['media_type'] !== 'CAROUSEL_ALBUM')
                <div class="col-md-3">
                    <div class="card">
                        @if($item['media_type'] === 'IMAGE')
                            <div class="youtube-size">
                                <img src="{{ $item['media_url'] }}" alt="{{ isset($item['caption']) ? $item['caption'] : '' }}" class="card-img-top image-expandable" data-src="{{ $item['media_url'] }}">
                            </div>
                        @elseif($item['media_type'] === 'VIDEO')
                            <div class="youtube-size">
                                <video controls class="card-img-top">
                                    <source src="{{ $item['media_url'] }}" type="video/mp4">
                                    <source src="{{ $item['media_url'] }}" type="video/ogg">
                                    <source src="{{ $item['media_url'] }}" type="video/webm">
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                        @endif
                        <div class="card-body">
                            <!-- Show only the first two lines of the caption -->
                            <p class="card-text">
                                @if(isset($item['caption']))
                                    @php $caption = $item['caption']; @endphp
                                    @if(strlen($caption) > 100)
                                        {{ substr($caption, 0, 100) . '...' }}
                                    @else
                                        {{ $caption }}
                                    @endif
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>

    <div class="expand-image">
        <img src="" alt="" class="expanded-image">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let imageExpandables = document.querySelectorAll('.image-expandable');
            let expandedImage = document.querySelector('.expanded-image');
            let expandImageContainer = document.querySelector('.expand-image');

            imageExpandables.forEach(function(imageExpandable) {
                imageExpandable.addEventListener('click', function() {
                    expandedImage.src = imageExpandable.dataset.src;
                    expandImageContainer.style.display = 'flex';
                });
            });

            expandImageContainer.addEventListener('click', function() {
                expandImageContainer.style.display = 'none';
            });
        });
    </script>
</div>

@endsection