@extends('layouts.dashboard')

@section('title', 'Manage Media')

@section('myJS')
	<script src="{{url('/')}}/js/admin/setup.js"></script>
	<script src="{{url('/')}}/js/admin/media.js"></script>
@endsection

@section('content')
<div class="padding-top40"></div>
<div class="bs-example">
	<div class="container-fluid">
		<div class="row">
			<div id="exTab1" class="panel panel-default">
				<ul class="nav nav-pills nav-catalog nav-justified">
					<li class="active">
						<a href="#viewMedia" data-toggle="tab">View Media</a>
					</li>
					<li>
						<a href="#importMedia" data-toggle="tab">Import Media</a>
					</li>
					<li>
						<a href="#mediaSetup" data-toggle="tab">Media Setup</a>
					</li>
				</ul>
			  	<div class="tab-content clearfix">
					<div class="tab-pane active" id="viewMedia">
						<div class="row" style="margin: 0px; ">
							<div class="col-md-12">
								<br><br>
								<input type="text" id="filterImage" placeholder="Search Images..." class="filter float-right form-control setup-width">
								<br><br><br><br>
							</div>
						</div>
						<div id="div_table">
							<div class="row" style="margin: 0px;">
									@foreach($imageList as $image)
										<div class="col-md-2" style="min-height: 250px">
																						<a href="#" id="{{ $image->ImageID }}" class="deleteMedia float-right text-danger" onclick="return false;"><i class="fa fa-times fa-lg"></i></a>
											<div class="text-center">
												<img src="{{ $imageURL }}" style="max-width:150px; max-height:150px;" />
												<br>
												{{ $image->ImageName }} 
												<!-- <br /> 
												Size {{ round($image->exifInfo->FileSize / 1000,2) }} Kb
												<br /> 
												Exif date {{ gmdate("d/m/Y", $image->exifInfo->FileDateTime) }}
												<br />
												Width {{ $image->exifInfo->COMPUTED->Width }}
												<br />
												Length {{ $image->exifInfo->COMPUTED->Height }} -->
											</div>
										</div>				  
									@endforeach
							</div>
							<div class="row" style="margin: 0px;">
								<div class="col-md-6">
									<div>Showing {{($imageList->currentpage()-1)*$imageList->perpage()+1}} to {{$imageList->currentpage()*$imageList->perpage()}}
										of  {{$imageList->total()}} entries
									</div>
								</div>
								<div class="col-md-6 text-right">
									@include('dashboard.paginator', ['paginator' => $imageList])
								</div>
							</div>
						</div>
						<div id="showResult" style="display:none;"></div>
		  			</div>
		  			<div class="tab-pane" id="importMedia">
						<div class="row" style="margin: 0px; padding-top: 15px; min-height:400px;">
							@if(count($newDropboxImages))
							<div class="col-md-12">
								<div class="alert alert-info text-center h4">New images found</div>
								@foreach($newDropboxImages as $image)
									<img src="{{$image->ImagePath}}" style="max-width:150px; max-height:150px;" />
								@endforeach
							</div>
							<div class="col-md-12">
								<br><br>
								<a href="{{env('APP_URL')}}syncDropboxImagesToS3" class="btn btn-info">Link Images to Products/Categories</a>
							</div>
							@endif
							<div class="col-md-12">
								<div class="alert alert-success h4 text-center">Add new images</div>
								<form action="{{env('APP_URL')}}uploadMedia" class="dropzone imageForm">
									@csrf
								  <div class="fallback">
								    <input name="file" type="file" multiple />
								  </div>
								</form>
							</div>
						</div>
		  			</div>
		  			<div class="tab-pane" id="mediaSetup">
						<div class="row" style="margin: 0px; min-height:400px;">
							<ul class="nav nav-pills nav-catalog nav-justified">
								<li class="active">
									<a  href="#imageLabel" data-toggle="tab">Image Label</a>
								</li>
								<li>
									<a href="#imageSize" data-toggle="tab">Image Size</a>
								</li>
								<li>
									<a href="#imageStore" data-toggle="tab">Image Store</a>
								</li>
							</ul>
							<div class="tab-content clearfix">
								<div class="tab-pane active" id="imageLabel">
									<div class="row" style="margin: 0px; padding-top: 15px; min-height:400px;">
										<div class="col-md-12">
											<button type="button" id="btnAddImageLabel" class="btn btn-default btn-xs btnAddImageLabelModel" data-toggle="modal" data-target="#imagelabelModel" title="Add Image Label"  style="font-size:14px !important;">Add Image Label</button>
											<br><br><br>
										</div>
										<div class="col-md-12">
											<table data-page-length='50'  id="imagelabelTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
												<thead>
													<tr>
														<th scope="col" class="set2 text-center">Image Label ID</th>
														<th scope="col" class="set2 text-center">Image Label Name</th>
														<th scope="col" class="set5 text-center">Operations</th>
													</tr>
												</thead>
												<tbody>
													@foreach($ImageLabels as $imagelabel)
														<tr id="imagelabel_{{$imagelabel->ImageLabelID}}">
															<td class="set-col2">
																{{$imagelabel->ImageLabelID}}
															</td>
															<td class="set-col2">
																{{$imagelabel->ImageLabelName}}
															</td>
															<td class="set-col5">
																<div class="bt-seperation">
																	<button type="button" class="btn btn-primary btn-xs edit_button_imagelabel"
																	data-toggle="modal" data-target="#imagelabelModel"
																	data-imagelabelid="{{$imagelabel->ImageLabelID}}"
																	data-imagelabelname="{{$imagelabel->ImageLabelName}}"
																	>
																	Edit</button> |

																	<button type="button" class="btn btn-primary btn-xs delete_button"
																	data-toggle="modal" data-target="#deleteModal"
																	data-tabname="ImageLabel"
																	data-id="{{$imagelabel->ImageLabelID}}">
																	Delete</button>
																</div>
															</td>
														</tr>
													@endforeach
												</tbody>
											</table>
										</div>
									</div>
								</div>
								<div class="tab-pane" id="imageSize">
									<div class="row" style="margin: 0px; padding-top: 15px; min-height:400px;">
										<div class="col-md-12">
											<button type="button" id="btnAddImageSize" class="btn btn-default btn-xs btnAddImageSizeModel" data-toggle="modal" data-target="#imagesizeModel" title="Add Image Size"  style="font-size:14px !important;">Add Image Size</button>
											<br><br><br>
										</div>
										<div class="col-md-12">
											<table data-page-length='50'  id="imagesizeTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
												<thead>
													<tr>
														<th scope="col" class="set2 text-center">ImageSize ID</th>
														<th scope="col" class="set2 text-center">Width</th>
														<th scope="col" class="set2 text-center">Height</th>
														<th scope="col" class="set5 text-center">Operations</th>
													</tr>
												</thead>
												<tbody>
													@foreach($ImageSizes as $imagesize)
														<tr id="imagesize_{{$imagesize->ImageSizeID}}">
															<td class="set-col2">
																{{$imagesize->ImageSizeID}}
															</td>
															<td class="set-col2">
																{{$imagesize->Width}}
															</td>
															<td class="set-col2">
																{{$imagesize->Height}}
															</td>
															<td class="set-col5">
																<div class="bt-seperation">
																	<!-- <button type="button" class="btn btn-primary btn-xs edit_button_imagesize"
																	data-toggle="modal" data-target="#imagesizeModel"
																	data-imagesizeid="{{$imagesize->ImageSizeID}}"
																	data-width="{{$imagesize->Width}}"
																	data-height="{{$imagesize->Height}}"

																	>
																	Edit</button> | -->
																	@if($imagesize->ImageSizeIsDefault != "1")
																		<button type="button" class="btn btn-primary btn-xs delete_button"
																		data-toggle="modal" data-target="#deleteModal"
																		data-tabname="ImageSize"
																		data-id="{{$imagesize->ImageSizeID}}">
																		Delete</button>
																	@endif
																</div>
															</td>
														</tr>
													@endforeach
												</tbody>
											</table>
										</div>
									</div>
								</div>
								<div class="tab-pane" id="imageStore">
									<div class="row" style="margin: 0px; padding-top: 15px; min-height:400px;">
										<div class="col-md-12">
											<h3>Image Sources</h3>
											<h5>Dropbox</h5>
											<a href="{{env('APP_URL')}}dropboxIntegration" class="btn btn-success">Integrate Dropbox</a>
										</div>
									</div>
								</div>
							</div>
						</div>
		  			</div>
		  		</div>
		  	</div>
	  	</div>
	</div>
</div>

<!-- Modal for Image Size Edit button -->

<div class="modal fade" id="imagesizeModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog setup-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Image Size</h4>
            </div>
            <form id="postImageSize">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Width:
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="number" name="width" id="width" class="width">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Height:
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="number" name="height" id="height" class="height">
                    		</div>
                    	</div>
                    </div>
					<div class="form-group">
                    	<div class="row">
                    		<div id="error" class="col-md-12 text-danger">

                    		</div>
                    	</div>
                    </div>
                </div>
                <div class="modal-footer setup-footer">
                	<input class="form-control imagesizeID" type="hidden" name="imagesizeID" id="imagesizeID">
                    <button type="submit" class="btn btn-primary btn_update_properties">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal for Image Label Edit button -->

<div class="modal fade" id="imagelabelModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog setup-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Image Label</h4>
            </div>
            <form id="postImageLabel">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Image Label Name:
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="text" name="imagelabelname" id="imagelabelname" class="imagelabelname">
                    		</div>
                    	</div>
                    </div>
					<div class="form-group">
                    	<div class="row">
                    		<div id="error" class="col-md-12 text-danger">
                    		</div>
                    	</div>
                    </div>
                </div>
                <div class="modal-footer setup-footer">
                	<input class="form-control imagelabelID" type="hidden" name="imagelabelID" id="imagelabelID">
                    <button type="submit" class="btn btn-primary btn_update_properties">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- End of Modal for Edit button -->

<!-- End of Modal for Edit button -->

<!-- Modal for Delete button -->

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Delete</h4>
            </div>
            <form id="deleteRow">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <input class="form-control id" type="hidden" name="id" id="id">
                        <input class="form-control" type="hidden" name="tabName" id="tabName">
                        Do you want to delete ?
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn_update_properties ">Yes</button>
                    <button type="button" class="btn btn-default cancel" data-dismiss="modal">No</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal for Delete button -->


<script type="text/javascript">

	$(document).ready(function(){

		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});

		$(document).ajaxStart(function () {
			$('#ajaxloader').show();
		})
		.ajaxStop(function () {
			$('#ajaxloader').hide();
		});

		$("#filterImage").keyup(function(){
			var matchvalue = $(this).val(); // this.value
			
			if(matchvalue != '')
			{
				$('#div_table').hide();
				$.ajax({
					type: "get",
					url: base_url + 'findImage/' + matchvalue,
					success: function(response){
						console.log(response);
						$('#showResult').show();
						$('#showResult').html(response);
					}
				});       
			}
			else
			{
				$('#showResult').hide();
				$('#div_table').show();
			}
		});

	});
</script>
	  
@endsection