@php
$photos = json_decode(`+ feed.photo_path +`);
if($photos) {
    $photo_count = count($photos);
}
@endphp
@if($photos)
@if(count($photos) > 0 && count($photos) < 2)
    <div class="card-body">
        <div class="row">
            @foreach ($photos as $photo)
                <div class="col mb-2" style="padding: 0"><a href="{{url('storage/'.$photo)}}" data-lightbox="`+ feed.id +`"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
            @endforeach
        </div>
    </div>
@elseif(count($photos) > 1 && count($photos) < 3)
    <div class="card-body">
        <div class="row">
            @foreach ($photos as $photo)
                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="`+ feed.id +`"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
            @endforeach
        </div>
    </div>
@elseif(count($photos) > 2 && count($photos) < 4)
    <div class="card-body">
        <div class="row">
            @foreach ($photos as $photo)
                <div class="col-sm-4 col-xss-4 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="`+ feed.id +`"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
            @endforeach
        </div>
    </div>
@elseif(count($photos) > 3 && count($photos) < 5)
    <div class="card-body">
        <div class="row">
            @foreach ($photos as $photo)
                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="`+ feed.id +`"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
            @endforeach
        </div>
    </div>
@elseif(count($photos) > 4)
    @php
        $n = 4; // to get the 4th image if the image count is greater than 3
    @endphp
    <div class="card-body">
        <div class="row">
            @foreach ($photos as $key => $photo)
                @if (in_array($key, [0,1,2,3]))
                    @if(($key + 1) % $n)
                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="`+ feed.id +`"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                    @else
                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2">
                            <a href="{{url('storage/'.$photo)}}" data-lightbox="`+ feed.id +`">
                                <img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3">
                                @php
                                    $photo_no = $photo_count - 4;
                                @endphp
                                <span class="img-count font-sm text-white ls-3 fw-600">
                                    <b>+
                                        @if($photo_no > 0)
                                            {{$photo_no}}
                                        @endif
                                    </b>
                                </span>
                            </a>
                        </div>
                    @endif
                @endif
            @endforeach
        </div>
    </div>
@endif
@endif
@if(`+ feed.video_path + `)
<div class="card-body">
    <div class="row justify-content-center">
        <div class="col mb-2" style="padding: 0">
            <video controls class="w-100 rounded-3">
                <source src="`+ feed.video_path +`" type="video/mp4">
            </video>
        </div>
    </div>
</div>
@endif
@if(`+ feed.file_path + `)
<div class="card-body">
    <div class="row ">
        <div class="col-12 pe-1 ps-1 mb-2">
            <a class="w-full text-gray-700" href="`+ feed.file_path +`" target="_blank">
                @if(`+ file_ext == 'pdf' + `)
                    <img src="{{asset('assets/images/pdf.png')}}" class="h-2 w-2 mr-2" alt="`+ feed.file_name +`">
                @elseif(`+ file_ext == 'doc' + `)
                    <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="`+ feed.file_name +`">
                @elseif(`+ file_ext == 'docx' + `)
                    <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="`+ feed.file_name +`">
                @else
                    <img src="{{asset('assets/images/document.png')}}" class="h-2 w-2 mr-2" alt="`+ feed.file_name +`">
                @endif
                `+ feed.file_name +`
                <span class="flex align items text-gray-600 dark:text-gray-300">
                    <i class="fe fe-download mx-2"></i>
                </span>
            </a>
        </div>
    </div>
</div>
@endif



if(length > 1 && length < 3) {
    // Make a container element for the list
    listContainer = document.createElement('div'),
    // Make the list
    listElement = document.createElement('row'),
    // Set up a loop that goes through the items in listItems one at a time
    numberOfListItems = data.length,

    html = document.getElementsByTagName('body')[0].appendChild(listContainer);
    listContainer.appendChild(listElement);
    for (i = 0; i < numberOfListItems; ++i) {
        listItem = document.createElement('row');
        listItem.innerHTML = `
            <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2" style="padding: 0"><a href="/storage/`+ data[i] +`" data-lightbox="`+ feedId +`"><img src="/storage/`+ data[i] +`" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
        `;
        listElement.appendChild(listItem);
    };
    return html
}

if(length > 1 && length < 3) {
    objTo = document.getElementById('card-body');
    for(var i = 0; i < data.length; i++) {
       html = `
            <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="/storage/`+ data[0] +`" data-lightbox="`+ feedId +`"><img src="/storage/`+ data[0] +`" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
        `;
    };
    return html;
}

$(newImage).append(`
                    <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="/storage/`+ image +`" data-lightbox="`+ feedId +`"><img src="/storage/`+ image +`" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                `);