@extends('layouts.admin')
@section('content-title')
	{{ __('media.Media Manager') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.media')}} 
@endsection
@section('css')
	<style type="text/css">
 		/* card details start  */
@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto+Condensed:400,400i,700,700i');
section #media-view{
    padding: 100px 0;
}
.details-card {
	background: #ecf0f1;
}

.card-content {
	margin-top: 10px;
	background: #ffffff;
	border: 4px;
	margin-bottom: 10px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.card-img {
	height: 200px;
	width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	z-index: 1;
	margin-bottom: 10px;
}

.card-img img {
	height: 200px;
	width: 100%;
	display: block;
	position: relative;
  text-align: center;
  color: white;
}
/* Centered text in img */
.centered {
  position: absolute;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fdfeff;
}

.card-img span#close {
	position: absolute;

    top: 10%;
    left: 95%;
    /*background: red;*/
    padding: 6px;
    color: red;
    font-size: 20px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transform: translate(-50%,-50%);
}


.card-desc {
	position:relative;
	word-wrap: break-word;
	padding: 1.25rem;
	padding-top: 0;
	height: 73px;


}

.card-desc h3 {
	color: #000000;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.3em;
    margin-top: 0;
    margin-bottom: 5px;
    padding: 0;
}

.card-desc p {
	color: #747373;
    font-size: 14px;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5;
	margin: 0px;
	margin-bottom: 20px;
	padding: 0;
	font-family: 'Raleway', sans-serif;
}


/*center default img*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 50%;
}
/* End card section */
/* hide button */
 button, input[type="submit"] {
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		font: inherit;
		cursor: pointer;
		outline: inherit;
	}
	/*scroll*/
section#media-view {
    background-color: white;
    width: auto;
    height: 80%;
    overflow: auto;
	}
.copy_link{
	position: absolute;
	right:    0;
	bottom:   0;
	}

</style>
@endsection



@section('content')
@if(session()->has('success'))
	<div class="alert alert-success alert-dismissible fade show" role="alert">
		{{ session()->get('success') }}
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
@endif

@if(session()->has('deleted'))
	<div class="alert alert-warning alert-dismissible fade show" role="alert">
		{{ session()->get('deleted') }}
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
@endif
	<section id="media-to-upload">
		<div class="card-box tilebox-one noradius">
			<div class="myalert alert alert-warning " role="alert" style="display: none;" >
			  {{ __('media.No file selected !!!') }}
			</div>
			{!!Form::open()->locale('media')->post()->multipart()->route('admin.media.save')!!}
			<div class="col-md-5">
		    	<div class="row mb-3">
		    		<label for="media-file">{{ __('media.Media upload') }}</label>
		            <div id="media-file" class="input-group">          
		                <div class="custom-file">
		                    <span class="btn-file">
		                        <label class="custom-file-label" for="file-upload">{{ __('media.Select file') }}</label>
		                         <input class="form-control-file  custom-file-input" aria-describedby="inputGroupFileAddon01" type="file" id="file-upload" name='media' type="file" style="display:none;" data-buttonText="dgdsgsd">
		                    </span>
		                </div>
		                <div class="custom-text-input"></div>
		            </div>
		    	</div>
		    	<div class="row pl-3">
		    		 {!!Form::submit('Save')->id('my-btn')!!}
		    	</div>
	        </div> 
	        {!!Form::close()!!}

	    </div>

	</section>

	<section id='media-view' class="details-card" style="
    padding-top: 20px;">
		 @if($mediadata->isEmpty())
			<h2>{{ __('media.No media to load') }}</h2>
		@endif
		<div class="container">

			<div class="row">
			@foreach($mediadata as $key => $item)
				<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
					<div class="card-content">
						<div class="card-img">
							{{-- <img class='img-loaded' src="https://placeimg.com/380/230/nature" alt=""> --}}

							@php
								$extention_img=['jpeg ','jpg','png','svg'];
								if(in_array($item->file_extension,$extention_img))
								{
									echo "<img src='/uploads/media/$item->url.$item->file_extension' alt=''>";
									
								}
								else
								{
									echo "<img class='center' src='/uploads/media/icons8-file-48.png' style='margin-top:20px; height:150px;width:150px'alt=''>";
									echo "<div class='centered'>.$item->file_extension</div>";
								}
							@endphp
							
							{!!Form::open()->post()->route('admin.media.delete')->attrs(['style'=>'display:inline','class'=>'deleteMedia'])!!}
							{!!Form::hidden('id')->value($item->id)!!}
							<button type='submit'>
                        		<span id='close' class='fa fa-close'></span>
                        	</button>
                        	 {!!Form::close()!!}

						</div>
						<div class="card-desc" style="padding-bottom: 0px;padding-right: 5px;padding-left: 5px;">
							{{-- <h6 style='margin-top: 10px;'>{{ $item->title }}</h6> --}}
							<p style='margin-bottom: 0px;'>{{str_limit($item->title,45)}}</p>
							<p class='d-none' id="{{$key}}">{{ url('/') }}/uploads/media/{{$item->url}}.{{$item->file_extension}}</p>
							<button type='button' class="copy_link btn btn-link" onclick="copyToClipboard('#{{$key}}')">Copy Link</button>
						</div>
					</div>
				</div>
			@endforeach
		</div>
	</section>

@endsection


@section('javascript')
<script type="text/javascript">


</script>
    
	{{-- placeholder the name of the file --}}
	<script type="text/javascript">
		$('#file-upload').change(function() {
		  var i = $(this).prev('label').clone();
		  var file = $('#file-upload')[0].files[0].name;
		  $(this).prev('label').text(file);
		});
	</script>
	{{-- Check file ,hide alert  --}}
	<script type="text/javascript">
		$("#my-btn").click(function() { 
		    
		    var fileName = $("#file-upload").val();
		    	if(!fileName) { // no file was selected

		        $(".myalert").css("display", "block");
		        {{-- auto close alert --}}
		        window.setTimeout(function() {
			    $(".myalert").fadeTo(500, 1).slideUp(500, function(){
			        $(this).css("display", "none");
			        
			    });
				}, 2000);
		        return false;
		    }
		    
		});
	</script>
	{{-- copy link --}}
	<script type="text/javascript">
		function copyToClipboard(element) {
		  var $temp = $("<input>");
		  $("body").append($temp);
		  $temp.val($(element).text()).select();
		  document.execCommand("copy");
		  $temp.remove();
		}
	</script>
	{{-- tooltip --}}
	<script type="text/javascript">
		$(function () {
		  $('[data-toggle="tooltip"]').tooltip()
		})
	</script>
	<!-- comfirm delete -->
	<script type="text/javascript">
	    $(".deleteMedia").on("submit", function(){
	        return confirm('{{ __("media.Do you want to delete this media ?") }}');
	    });
	</script>


	
@endsection