@extends('backend.layouts.app')
@section('head')
<style>
    .card-img-top{
        aspect-ratio: 3 / 2;
        object-fit: contain;
        width: 100%;
        height: 100%;
        object-position: center;
        position: absolute;
        left: 0;
        top: 0;
    }
    .card-figure-top{
        width: 100%;
        display: block;
        overflow: hidden;
        position: relative;
    }
    .card-figure-top::before{
        content: "";
        width: 100%;
        display: block;
        padding-top: 60%;
    }
    .drop-options{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
    }
</style>
    
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card p-3">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <h5 class="card-title mb-0">Uploaded Files</h5>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <a href="{{ route('uploader.create') }}" class="btn btn-primary add-btn"><i class="ri-add-line align-bottom me-1"></i> Upload New File</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @if($all_uploads->isNotEmpty())
                    @foreach ($all_uploads as $file)
                        <div class="col-sm-2 col-xl-2 d-flex align-items-stretch">
                            <div class="card w-100 position-relative">
                                <div class="dropdown drop-options">
                                    <button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="las la-ellipsis-v fs-2"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                                      <li><a class="dropdown-item" href="javascript:void(0)" onclick="detailsInfo(this)" data-id="{{ $file->id }}">File Info</a></li>
                                      <li><a class="dropdown-item confirm-delete" data-bs-toggle="modal" href="#deleteRecordModal" data-href="{{route('uploader.file-destroy', $file->id)}}" data-id="{{ $file->id }}">Delete</a></li>
                                      <li><a class="dropdown-item" href="{{ my_asset($file->file_name) }}" target="_blank" download="{{ $file->file_original_name }}.{{ $file->extension }}">Download</a></li>
                                    </ul>
                                  </div>
                                <div class="card-figure-top">
                                    <img class="card-img-top style="height: 200px; object-fit: cover;" src="{{uploaded_asset($file->id)}}" alt="Card image cap">
                                </div>
                                <div class="card-body">
                                    <span class="fw-bold">{{$file->file_original_name.'.'.$file->extension}} </span>
                                    <div class="row">
                                        <div class="col-md-6"><span class="text-muted fs-12">{{formatBytes($file->file_size)}} </span> ({{$file->id}})</div>
                                        <div class="col-md-6 mt-1 text-end"><a class="text-danger confirm-delete" data-bs-toggle="modal" href="#deleteRecordModal" data-href="{{route('uploader.file-destroy', $file->id)}}"  title="Remove" class="text-danger"><i class="las la-trash fs-5"></i></a> </div>
                                        
                                        <span> </span>
                                    </div>
                                </div>
                            </div><!-- end card -->
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</div>
@endsection
@section('modal')
<div id="info-modal" class="modal fade">
	<div class="modal-dialog modal-dialog-right">
			<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title h6">{{ translate('File Info') }}</h5>
			</div>
			<div class="modal-body c-scrollbar-light position-relative" id="info-modal-content">
				<div class="c-preloader text-center absolute-center">
                    <i class="las la-spinner la-spin la-3x opacity-70"></i>
                </div>
			</div>
		</div>
	</div>
</div>
@include('backend.modals.delete')
@endsection
@section('script')
<script>
    
    function detailsInfo(e){
        $('#info-modal-content').html('<div class="c-preloader text-center absolute-center"><i class="las la-spinner la-spin la-3x opacity-70"></i></div>');
        var id = $(e).data('id')
        $('#info-modal').modal('show');
        $.post('{{ route('uploaded-files.info') }}', {_token: "{{csrf_token()}}", id:id}, function(data){
            $('#info-modal-content').html(data);
            // console.log(data);
        });
    }
</script>
    
@endsection