@extends("LaravelVueAdmin.layouts.app")

@section("contentheader_title", "Uploads")
@section("contentheader_description", "Uploaded images & files")
@section("section", "Uploads")
@section("sub_section", "Listing")
@section("htmlheader_title", "Uploaded images & files")

@section("headerElems")
@lv_access("Uploads", "create")
<ul class="fab-menu fab-menu-absolute fab-menu-top-right affix-top" data-fab-toggle="click" id="fab-menu-affixed-right">
    <li>
        <a class="fab-menu-btn btn bg-primary-300 btn-float btn-rounded btn-icon legitRipple">
            <i class="fab-icon-open icon-grid3"></i>
            <i class="fab-icon-close icon-cross2"></i>
        </a>

        <ul class="fab-menu-inner">
            <li>
                <div data-fab-label="Upload File">
                    <button id="AddNewUploads" class="btn btn-default btn-rounded btn-icon btn-float legitRipple">
                        <i class="icon-compose"></i>
                    </button>
                </div>
            </li>
            <li>
                <div data-fab-label="Close File">
                    <button id="closeDZ1" class="btn btn-default btn-rounded btn-icon btn-float legitRipple">
                        <i class="icon-close2"></i>
                    </button>
                </div>
            </li>
        </ul>
    </li>
</ul>
@endlv_access
@endsection

@section("main-content")

@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

    <form action="{{ url(config('LaravelVueAdmin.adminRoute') . '/upload_files') }}" class="dropzone" id="fm_dropzone_main" enctype="multipart/form-data" method="POST">
        {{csrf_field()}}
        <div class="dz-default dz-message"><span></span></div>
    </form>

	<!-- Multiple file upload -->
    <div class="panel panel-flat">
            <div class="panel-heading">
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li><a data-action="collapse"></a></li>
                        <li><a data-action="reload"></a></li>
                    </ul>
                </div>
            </div>

            <div class="panel-body">
              <table id="example1" class="table datatable-responsive-control-right table-xxs">
                <thead>

                    <th >ID</th>
                  <th >Gambar / Icon</th>
                      <th >File</th>
                    <th >Di-Upload Oleh</th>
                    <th >Di-Update Waktu</th>
                  </tr>
                </thead>
              </table>
            </div>
        </div>
        <!-- /multiple file upload -->

<div class="modal fade" id="EditFileModal" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document" style="width:90%;">
		<div class="modal-content">
			<div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
                <!--<button type="button" class="next"><i class="fa fa-chevron-right"></i></button>
                <button type="button" class="prev"><i class="fa fa-chevron-left"></i></button>-->
				<h4 class="modal-title" id="myModalLabel">File: </h4>
			</div>
			<div class="modal-body p0">
                    <div class="row m0">
                        <div class="col-xs-8 col-sm-8 col-md-8">
                            <div class="fileObject">

                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4">
                            {!! Form::open(['class' => 'file-info-form']) !!}
                                <input type="hidden" name="file_id" value="0">
                                <div class="form-group">
                                    <label for="filename">File Name</label>
                                    <input class="form-control" placeholder="File Name" name="filename" type="text" @if(!config('LaravelVueAdmin.uploads.allow_filename_change') || !Module::hasFieldAccess("Uploads", "name", "write")) readonly @endif value="">
                                </div>
                                <div class="form-group">
                                    <label for="url">URL</label>
                                    <input class="form-control" placeholder="URL" name="url" type="text" readonly value="">
                                </div>
                                <div class="form-group">
                                    <label for="caption">Label</label>
                                    <input class="form-control" placeholder="Caption" name="caption" type="text" value="" @if(!Module::hasFieldAccess("Uploads", "caption", "write")) readonly @endif>
                                </div>
                                @if(!config('LaravelVueAdmin.uploads.private_uploads'))
                                    <div class="form-group">
                                        <label for="public">Is Public ?</label>
                                        {{ Form::checkbox("public", "public", false, []) }}
                                        <div class="Switch Ajax Round On" style="vertical-align:top;margin-left:10px;"><div class="Toggle"></div></div>
                                    </div>
                                @endif
                            {!! Form::close() !!}
                        </div>
                    </div><!--.row-->
			</div>
			<div class="modal-footer">
				<a class="btn btn-success" id="downFileBtn" href="">Download</a>
				@lv_access("Uploads", "delete")
                <button type="button" class="btn btn-danger" id="delFileBtn">Delete</button>
				@endlv_access
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

@include('LaravelVueAdmin.layouts.partials.file_manager')
@endsection

@push('styles')

@endpush

@push('scripts')
<script src="{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
<script>
var bsurl = $('body').attr("bsurl");
var fm_dropzone_main = null;
var cntFiles = null;
$(function () {
    Dropzone.autoDiscover = false;
	@lv_access("Uploads", "create")
	fm_dropzone_main = new Dropzone("#fm_dropzone_main", {
        maxFilesize: 2,
        acceptedFiles: "image/*,application/pdf,.xls,.xlsx,.doc,.docx",
        init: function() {
            this.on("complete", function(file) {
                this.removeFile(file);
            });
            this.on("success", function(file) {
                console.log("addedfile");
                console.log(file);
                location.reload();
            });
        }
    });
    $("#fm_dropzone_main").slideUp();
    $("#AddNewUploads").on("click", function() {
        $("#fm_dropzone_main").slideDown();
        //$("#AddNewUploads").slideUp();
    });
    $("#closeDZ1").on("click", function() {
        $("#fm_dropzone_main").slideUp();
        //$("#AddNewUploads").slideDown();
    });
	@endlv_access

    $("body").on("click", ".name_files", function() {
        var upload = $(this).attr("upload");
        upload = JSON.parse(upload);

        $("#EditFileModal .modal-title").html("File: "+upload.name);
        $(".file-info-form input[name=file_id]").val(upload.id);
        $(".file-info-form input[name=filename]").val(upload.name);
        $(".file-info-form input[name=url]").val(bsurl+'/files/'+upload.hash+'/'+upload.name);
        $(".file-info-form input[name=caption]").val(upload.caption);
        $("#EditFileModal #downFileBtn").attr("href", bsurl+'/files/'+upload.hash+'/'+upload.name+"?download");

        @if(!config('LaravelVueAdmin.uploads.private_uploads'))
        if(upload.public == "1") {
            $(".file-info-form input[name=public]").attr("checked", !0);
            $(".file-info-form input[name=public]").next().removeClass("On").addClass("Off");
        } else {
            $(".file-info-form input[name=public]").attr("checked", !1);
            $(".file-info-form input[name=public]").next().removeClass("Off").addClass("On");
        }
        @endif

        $("#EditFileModal .fileObject").empty();
        if($.inArray(upload.extension, ["jpg", "jpeg", "png", "gif", "bmp"]) > -1) {
            $("#EditFileModal .fileObject").append('<img src="'+bsurl+'/files/'+upload.hash+'/'+upload.name+'" class="img-responsive">');
            $("#EditFileModal .fileObject").css("padding", "15px 0px");
        } else {
            switch (upload.extension) {
                case "pdf":
                    // TODO: Object PDF
                    $("#EditFileModal .fileObject").append('<object width="100%" height="325" data="'+bsurl+'/files/'+upload.hash+'/'+upload.name+'"></object>');
                    $("#EditFileModal .fileObject").css("padding", "0px");
                    break;
                default:
                    $("#EditFileModal .fileObject").append('<i class="fa fa-file-text-o"></i>');
                    $("#EditFileModal .fileObject").css("padding", "15px 0px");
                    break;
            }
        }
        $("#EditFileModal").modal('show');
    });
    @if(!config('LaravelVueAdmin.uploads.private_uploads') && Module::hasFieldAccess("Uploads", "public", "write"))
    $('#EditFileModal .Switch.Ajax').click(function() {
        $.ajax({
            url: "{{ url(config('LaravelVueAdmin.adminRoute') . '/uploads_update_public') }}",
            method: 'POST',
            data: $("form.file-info-form").serialize(),
            success: function( data ) {
                console.log(data);
                loadUploadedFiles();
            }
        });

    });
    @endif

	@lv_field_access("Uploads", "caption", "write")
    $(".file-info-form input[name=caption]").on("blur", function() {
        // TODO: Update Caption
        $.ajax({
            url: "{{ url(config('LaravelVueAdmin.adminRoute') . '/uploads_update_caption') }}",
            method: 'POST',
            data: $("form.file-info-form").serialize(),
            success: function( data ) {
                console.log(data);
                loadUploadedFiles();
            }
        });
    });
	@endlv_field_access

    @if(config('LaravelVueAdmin.uploads.allow_filename_change') && Module::hasFieldAccess("Uploads", "name", "write"))
    $(".file-info-form input[name=filename]").on("blur", function() {
        // TODO: Change Filename
        $.ajax({
            url: "{{ url(config('LaravelVueAdmin.adminRoute') . '/uploads_update_filename') }}",
            method: 'POST',
            data: $("form.file-info-form").serialize(),
            success: function( data ) {
                console.log(data);
                loadUploadedFiles();
            }
        });
    });
    @endif

	@lv_access("Uploads", "delete")
    $("#EditFileModal #delFileBtn").on("click", function() {
        if(confirm("Delete image "+$(".file-info-form input[name=filename]").val()+" ?")) {
            $.ajax({
                url: "{{ url(config('LaravelVueAdmin.adminRoute') . '/uploads_delete_file') }}",
                method: 'POST',
                data: $("form.file-info-form").serialize(),
                success: function( data ) {
                    // console.log(data);
                    location.reload();
                    loadUploadedFiles();
                    $("#EditFileModal").modal('hide');
                }
            });
        }
    });
	@endlv_access

    loadUploadedFiles();
});
function loadUploadedFiles() {
    var doms="";
    var $rows = "";
    $.ajax({
            url:"{{ url(config('LaravelVueAdmin.adminRoute') . '/uploaded_files') }}",
            type:"GET",
            success:function(res){
                rows = res.recordsTotal;
            }
    });

    if($rows > 50){
        doms =  '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>';
    } else {
        doms =  '<"datatable-header"f><"datatable-scroll"t><"datatable-footer">';
    }
    // // load folder files
    // $.ajax({
    //     dataType: 'json',
    //     url: "{{ url(config('LaravelVueAdmin.adminRoute') . '/uploaded_files') }}",
    //     success: function ( json ) {
    //         console.log(json);
    //         cntFiles = json.uploads;
    //         $("ul.files_container").empty();
    //         if(cntFiles.length) {
    //             for (var index = 0; index < cntFiles.length; index++) {
    //                 var element = cntFiles[index];
    //                 var li = formatFile(element);
    //                 $("ul.files_container").append(li);
    //             }
    //         } else {
    //             $("ul.files_container").html("<div class='text-center text-danger' style='margin-top:40px;'>No Files</div>");
    //         }
    //     }
    // });

     var list_upload = $("#example1").DataTable({
      processing: true,
      serverSide: true,
      autoWidth: false,
      responsive: true,
      	ajax: "{{ url(config('LaravelVueAdmin.adminRoute') . '/uploaded_files') }}",
      dom: doms,
      iDisplayLength: 50,

      //Tambahan Roni JR 020218
      createdRow: function( row, data, dataIndex ) {
          $(row).addClass( 'row-'+data[0] );
      },

        columnDefs: [
            {
                "targets": [ 0 ],
                "visible": false,
                "searchable": false
            },
            {
                 "targets": [1],
                 render: function ( data, type, full, meta ) {
                        var render ="";
                        var img = ['jpg','jpeg','png','gif','JPG','JPEG'];
                        if($.inArray(full[8], img) != -1){
                          render += '<img src="