@extends('admin::layouts.master')

@push('styles')
    <style>
        table#attribute-table tr td a.button { display:none;}
        table#attribute-table tr:hover td a.button { display:inline-block;}
    </style>
@endpush

@section('content')
<div class="aiz-titlebar text-left mt-2 mb-3">
	<div class="row align-items-center">
		<div class="col-md-6">
			<h1 class="h3">{{translate('All uploaded files')}}</h1>
		</div>
		<div class="col-md-6 text-md-right">
			<a href="{{ route('admin.file_manager.create') }}" class="btn btn-success">
				<span>{{translate('Upload New File')}}</span>
			</a>
		</div>
	</div>
</div>
<div class="card">
    <form id="sort_uploads" action="">
        <div class="card-header row gutters-5">
            <div class="col-md-3">
                <h5 class="mb-0 h6">{{translate('All files')}}</h5>
            </div>
            <div class="col-md-3 ml-auto mr-0">
                <select class="form-control form-control-xs aiz-selectpicker" name="sort" onchange="sort_uploads()">
                    <option value="newest" @if($sortBy == 'newest') selected="" @endif>{{ translate('Sort by newest') }}</option>
                    <option value="oldest" @if($sortBy == 'oldest') selected="" @endif>{{ translate('Sort by oldest') }}</option>
                    <option value="smallest" @if($sortBy == 'smallest') selected="" @endif>{{ translate('Sort by smallest') }}</option>
                    <option value="largest" @if($sortBy == 'largest') selected="" @endif>{{ translate('Sort by largest') }}</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control form-control-xs" name="search" placeholder="{{ translate('Search your files') }}" value="{{ $search }}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">{{ translate('Search') }}</button>
            </div>
        </div>
    </form>
    <div class="card-body">
    	<div class="row gutters-5">
    		@foreach($uploadFiles as $key => $file)
    			@php
    				if($file->original_name == null){
    				    $fileName = translate('Unknown');
    				}else{
    					$fileName = $file->original_name;
	    			}
    			@endphp
    			<div class="col-auto w-140px w-lg-220px">
    				<div class="aiz-file-box">
    					<div class="dropdown-file" >
    						<a class="dropdown-link" data-toggle="dropdown">
    							<i class="la la-ellipsis-v"></i>
    						</a>
    						<div class="dropdown-menu dropdown-menu-right">
    							<a href="javascript:void(0)" class="dropdown-item" onclick="detailsInfo(this)" data-id="{{ $file->id }}">
    								<i class="las la-info-circle mr-2"></i>
    								<span>{{ translate('Details Info') }}</span>
    							</a>
    							<a href="{{ myAsset($file->name) }}" target="_blank" download="{{ $fileName }}.{{ $file->extension }}" class="dropdown-item">
    								<i class="la la-download mr-2"></i>
    								<span>{{ translate('Download') }}</span>
    							</a>
    							<a href="javascript:void(0)" class="dropdown-item" onclick="copyUrl(this)" data-url="{{ myAsset($file->name) }}">
    								<i class="las la-clipboard mr-2"></i>
    								<span>{{ translate('Copy Link') }}</span>
    							</a>
    							<a href="#" class="dropdown-item confirm-delete" data-href="{{ route('admin.file_manager.destroy', $file->id ) }}">
    								<i class="las la-trash mr-2"></i>
    								<span>{{ translate('Delete') }}</span>
    							</a>
    						</div>
    					</div>
    					<div class="card card-file aiz-uploader-select c-default" title="{{ $fileName }}.{{ $file->extension }}">
    						<div class="card-file-thumb">
    							@if($file->file_type == 'image')
    								<img src="{{ myAsset($file->name) }}" class="img-fit">
    							@elseif($file->file_type == 'video')
    								<i class="las la-file-video"></i>
    							@else
    								<i class="las la-file"></i>
    							@endif
    						</div>
    						<div class="card-body">
    							<h6 class="d-flex">
    								<span class="text-truncate title">{{ $fileName }}</span>
    								<span class="ext">.{{ $file->extension }}</span>
    							</h6>
    							<p>{{ formatBytes($file->file_size) }}</p>
    						</div>
    					</div>
    				</div>
    			</div>
    		@endforeach
    	</div>
		<div class="aiz-pagination mt-3">
			{{ $uploadFiles->appends(request()->input())->links() }}
		</div>
    </div>
</div>

    <!--  -->
  
    <!--  -->
@endsection

@section('modal')
    @include('admin::modals.delete_modal')
    @include('admin::modals.confirm_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>
                    <button type="button" class="close" data-dismiss="modal">
                    </button>
                </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>
@endsection

@section('script')
@include('category::scripts.index_scripts')
<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('admin.file_manager.show') }}', {_token: AIZ.data.csrf, id:id}, function(data){
            $('#info-modal-content').html(data);
            // console.log(data);
        });
    }

    function copyUrl(e) {
			var url = $(e).data('url');
			var $temp = $("<input>");
		    $("body").append($temp);
		    $temp.val(url).select();
		    try {
			    document.execCommand("copy");
			    AIZ.plugins.notify('success', '{{ translate('Link copied to clipboard') }}');
			} catch (err) {
			    AIZ.plugins.notify('danger', '{{ translate('Oops, unable to copy') }}');
			}
		    $temp.remove();
		}
        function sort_uploads(el){
            $('#sort_uploads').submit();
        }
</script>
@endsection