@if($type !== MediaType::VIDEO)
<button type="button" class="btn btn-info btn-rounded" id="btn-add">Tambah Media</button>
@endif
@if($type === MediaType::VIDEO)
<div class="btn-group">
    <button type="button" class="btn btn-info" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tambah Media</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(111px, 44px, 0px);">
    	<h6 class="dropdown-header">Pilih: </h6>
        <a href="#lightgallery" class="dropdown-item" id="btn-add">Upload</a>
        <a href="#lightgallery" class="dropdown-item" id="btn-open-modal-import" data-toggle="modal" data-target="#modal-import">Import</a>
    </div> 
</div>
<!-- <button type="button" class="btn btn-info btn-rounded" data-toggle="modal" data-target="#modal-import">Import</button> -->

<div class="modal" id="modal-import">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Import</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
        	{{ Form::videoLink('link', "Embed Video", null, []) }}
        </div>
        <div class="modal-footer">
        	<button type="button" class="btn btn-primary" data-dismiss="modal" id="btn-import">Simpan</button>
        	<button type="button" class="btn btn-light" data-dismiss="modal">Keluar</button>
        </div>
    	</div>
    </div>
</div>
@endif

@if($type === MediaType::DOCUMENT)

<div id="lightgallery" class="row" style="margin: 10px 0">
	<div class="col-12 col-md-12">
		<ul class="list-group lightGallery">
		     @foreach($list as $value)
		     <x-initiate-gallery-media :attachment="$value" />
		     @endforeach
		</ul>
	</div>
</div>

@else

<div id="lightgallery" class="row lightGallery" style="margin: 10px 0">
     @foreach($list as $value)
     <x-initiate-gallery-media :attachment="$value" />
     @endforeach
</div>
@endif

<div class="modal" id="showAttachment">
	<div class="modal-dialog modal-lg">
      <div class="modal-content">
      	<div class="modal-header">
          <h4 class="modal-title">Media</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
        	<img class="mx-auto d-block img-thumbnail" src="">
        </div>
        <div class="modal-footer">
        	<button class="btn btn-danger btn-rounded" id="remove-attachment">Hapus</button>
        </div>
      </div>
  	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$("#btn-add").click(function(){
			window.open('/filemanager' + '?type={{$type["type"]}}', 'FileManager', 'width=900,height=600');
            window.SetUrl = function (items) {
            	$.ajax({
					headers: {
		                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		            },
		            type: "post",
		            url: "{{$action}}",
		            data:{item: items,id:"{{$media->id}}" },
		            dataType: "json",
		            success: function(res){
		              if(res.status){
		              	toastr.success(res.message);
		              	$(".lightGallery").html(res.data);
		              }else{
		                  toastr.error(res.message);
		              }

		            },
		            error: function (xhr, ajaxOptions, thrownError) {
		              ajaxError(xhr.status, xhr.statusText)
		            }
				})
            }
		})

		$(".lightGallery").on('click','.select-img',function(){
			var id = $(this).attr('id-attachment');
			var src = $(this).attr('src');
			$("#showAttachment img").attr('src',src);
			$("#remove-attachment").attr('id-attachment',id);
			$("#showAttachment").modal('show');
		})

		$(".lightGallery").on('click','.remove-attachments',function(){
			var id = $(this).attr('id-attachment');
			swal({
	            title: "Peringatan",
	            text: "Hapus File ini?",
	            showCancelButton: true,
	            closeOnConfirm: true,
	            dangerMode: true,
	            confirmButtonText: 'HAPUS',
	            cancelButtonText: "TIDAK",
	        },function(confirm){
	        	if(confirm){
	        		$.ajax({
						headers: {
			                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			            },
			            type: "post",
			            url: "{{$delete}}",
			            data:{id:"{{$media->id}}",attachment:id },
			            dataType: "json",
			            success: function(res){
			              if(res.status){
			              	toastr.success(res.message);
			              	$(".lightGallery").html(res.data);
			              }else{
			                  toastr.error(res.message);
			              }

			            },
			            error: function (xhr, ajaxOptions, thrownError) {
			              ajaxError(xhr.status, xhr.statusText)
			            }
					})
	        	}
	        })
		})

		$("#remove-attachment").click(function(){
			var id = $(this).attr('id-attachment');
			swal({
	            title: "Peringatan",
	            text: "Hapus File ini?",
	            showCancelButton: true,
	            closeOnConfirm: true,
	            dangerMode: true,
	            confirmButtonText: 'HAPUS',
	            cancelButtonText: "TIDAK",
	        },function(confirm){
	        	if(confirm){
	        		$("#showAttachment").modal('hide');
	        		$.ajax({
						headers: {
			                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			            },
			            type: "post",
			            url: "{{$delete}}",
			            data:{id:"{{$media->id}}",attachment:id },
			            dataType: "json",
			            success: function(res){
			              if(res.status){
			              	toastr.success(res.message);
			              	$(".lightGallery").html(res.data);
			              }else{
			                  toastr.error(res.message);
			              }

			            },
			            error: function (xhr, ajaxOptions, thrownError) {
			              ajaxError(xhr.status, xhr.statusText)
			            }
					})
	        	}
	        })
		})

		$("#btn-import").click(function(){
			var link = $("#link").val();
			if(link.length > 10){
				$.ajax({
						headers: {
			                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			            },
			            type: "post",
			            url: "{{$import}}",
			            data:{id:"{{$media->id}}",link:link },
			            dataType: "json",
			            success: function(res){
			              if(res.status){
			              	toastr.success(res.message);
			              	$(".lightGallery").html(res.data);
			              }else{
			                  toastr.error(res.message);
			              }

			            },
			            error: function (xhr, ajaxOptions, thrownError) {
			              ajaxError(xhr.status, xhr.statusText)
			            }
					})
			}
		})

		$(".lightGallery").on('click','.add-thumbnail',function(){
			var id = $(this).attr('id-attachment');
			window.open('/filemanager' + '?type=image', 'FileManager', 'width=900,height=600');
            window.SetUrl = function (items) {
            	$.ajax({
					headers: {
		                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		            },
		            type: "post",
		            url: "{{$addThumbnail}}",
		            data:{item: items,id:id,media:"{{$media->id}}"},
		            dataType: "json",
		            success: function(res){
		              if(res.status){
		              	toastr.success(res.message);
		              	$(".lightGallery").html(res.data);
		              }else{
		                  toastr.error(res.message);
		              }

		            },
		            error: function (xhr, ajaxOptions, thrownError) {
		              ajaxError(xhr.status, xhr.statusText)
		            }
				})
            }
		})

		$(".lightGallery").on('click','.remove-thumbnail',function(){
			var id = $(this).attr('id-attachment');
			swal({
	            title: "Peringatan",
	            text: "Hapus Thumbnail ini?",
	            showCancelButton: true,
	            closeOnConfirm: true,
	            dangerMode: true,
	            confirmButtonText: 'HAPUS',
	            cancelButtonText: "TIDAK",
	        },function(confirm){
	        	if(confirm){
	        		$.ajax({
						headers: {
			                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			            },
			            type: "post",
			            url: "{{$removeThumbnail}}",
			            data:{id:id,media:"{{$media->id}}" },
			            dataType: "json",
			            success: function(res){
			              if(res.status){
			              	toastr.success(res.message);
			              	$("#modal-media-"+id).modal('hide');
			              	$(".lightGallery").html(res.data);
			              }else{
			                  toastr.error(res.message);
			              }

			            },
			            error: function (xhr, ajaxOptions, thrownError) {
			              ajaxError(xhr.status, xhr.statusText)
			            }
					})
	        	}
	        })
			
		});

		$("#btn-open-modal-import").click(function(){
			$("#link").val(null);
			$("#palace-review-link").hide();
		})
	})
</script>