@extends('layouts.admin')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
@section('content')

<style>
    .zoom_icon{
        cursor: zoom-in;
    }
</style>

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">Post Details</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.posts') }}">Posts</a></li>
                    <li class="breadcrumb-item active">View Post</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Post Information</h5>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    <tr>
                        <th>Post ID</th>
                        <td>{{ $post->post_id }}</td>
                    </tr>
                    <tr>
                        <th>Description</th>
                        <td>
                            <div style="max-height: 300px; overflow-y: auto;">
                                {!! $post->description !!}
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Created By</th>
                        <td>{{ $post->user->name ?? 'Unknown' }}</td>
                    </tr>
                    <tr>
                        <th>Post Type</th>
                        <td>{{ $post->postType->name ?? 'Unknown' }}</td>
                    </tr>
                   
                    <tr>
                        <th>Created At</th>
                        <td>{{ $post->created_at->format('d M Y, H:i A') }}</td>
                    </tr>
                    <tr>
                        <th>Updated At</th>
                        <td>{{ $post->updated_at->format('d M Y, H:i A') }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Image Card -->
@if($post->files)
    @php
        $images = $post->files;
    @endphp
    @if(!empty($images))
    <div class="row mt-3">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Post Images</h5>
                </div>
                <div class="card-body text-center">
                    <div class="row">
                        @foreach($images as $image)
                            <div class="col-md-3 mb-3">
                                @if(in_array($image->extension,['mp4','avi','3gp']))
                                <a data-fancybox="gallery1" class="zoom_icon" href="#!" data-src="{{$image->full_url}}" data-caption="Post Video" ><video width="100%" height="240" controls class="img-thumbnail">
                                    <source src="{{$image->full_url}}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video></a>
                            </div>
                                @else
                                <a data-fancybox="gallery" class="zoom_icon" href="#!" data-src="{{$image->full_url}}" data-caption="Post Image" > <img src="{{$image->full_url}}" alt="Post Image" class="img-thumbnail" style="max-width: 100%; height: auto;"></a>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
@endif


<!-- Video Card -->



<!-- Poll Card -->
@if($post->poll_question || $post->poll_options)
<div class="row mt-3">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Poll Information</h5>
            </div>
            <div class="card-body">
                <h6><strong>Question:</strong> {{ $post->poll_question ?? 'N/A' }}</h6>
                @if($post->poll_options)
                    @php
                        $pollOptions = json_decode($post->poll_options);
                    @endphp
                    <ul>
                        @foreach($pollOptions as $option)
                            <li>{{ $option }}</li>
                        @endforeach
                    </ul>
                @else
                    <p>No Poll Options</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endif

<div class="mt-3">
    <a href="{{ route('admin.posts') }}" class="btn btn-back">Back to Posts</a>
</div>

@endsection

@section('script')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
   
    <script type="text/javascript">
        $(document).ready(function () {
            Fancybox.bind('[data-fancybox="gallery"]', {  });
            Fancybox.bind('[data-fancybox="gallery1"]', {  });

        });
    </script>

@endsection