@extends($layout)

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"></div>

                    <div class="row">
                        <div class="col-12 text-end">

                            <a class="btn bg-gradient-dark mb-0 me-4" href="javascript:history.back();">
                                <i class="fas fa-chevron-circle-left"></i>&nbsp;&nbsp;Back
                            </a>
                            
                          
                            
                          

                        </div>
                    </div>

                    <div class="card-body">
                        @if ($file->file_type == 1) 
                        <video width="100%" height="100%" controls>
                            <source src="{{ $file->signedUrl }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        @elseif ($file->file_type == 3)
        <img src="{{ $file->signedUrl }}" alt="{{ $file->title }}" width="100%" height="auto" style="max-height: 500px; object-fit: contain;">
    @endif


                        <h3>{{ $file->title }}</h3>
                        <p>{{ $file->description }}</p>
                        @if ($file->tags->isNotEmpty())
        <p><strong>Tags:</strong></p>
        <div class="d-flex flex-wrap pb-2">
            @foreach ($file->tags as $tag)
                <span class="badge bg-gradient-secondary m-1 px-3 py-2" style="font-size: 0.9rem;">
                    {{ $tag->name }}
                </span>
            @endforeach
        </div>
    @endif
                        <p><strong>Uploaded on:</strong> {{ \Carbon\Carbon::parse($file->capture_datetime)->format('d F, Y') }}</p>

                        



                    </div>
                </div>
                {{-- <div class="card mt-4">

                    <div class="card-body">
                        <h3>Associated Images</h3>
                        <div class="row">
                            @if ($associatedImages->isEmpty())
                                <p>No associated images available.</p>
                            @else
                                @foreach ($associatedImages as $image)
                                    <div class="col-md-3 mb-3">
                                        <a href="{{ $image['signed_url'] }}" data-lightbox="associated-images"
                                            data-title="Associated Image">
                                            <img src="{{ $image['signed_url'] }}" alt="Associated Image" class="img-fluid">
                                        </a>
                                    </div>
                                @endforeach
                            @endif

                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<script>
   

    function number_format(number) {
        return new Intl.NumberFormat().format(number);
    }
</script>
    
@endsection