@extends('layouts.app')

@section('title', 'List File')
@section('breadcrumb', 'List File')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List
    </a>
@endsection

@section('custom-style')
    <link href="{{asset('assets/css/custom/treeview.css')}}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
@endsection
@section('custom-style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
    <style>
    .buttonIco {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    }
    </style>
@endsection
@section('list-file', 'kt-menu__item--active')
@section('content')
    <div class="col-md-12">
        <button type="button" id="modalgan" class="btn btn-light btn-elevate btn-pill" data-toggle="modal" data-target="#uploadFile"><i class="flaticon-upload-1"></i>Upload File</button>
        <button type="button" class="btn btn-light btn-elevate btn-pill" data-toggle="modal" data-target="#createFolder"><i class="la la-plus"></i>Create Folder</button>


    </div>
    <br>
    <div class="kt-portlet">
        <br>
        <div class="mb-4">
            <div class="col-md-12">
                <div class="accordion accordion-toggle-arrow" id="accordion-info">
                    <div class="card" style="border-bottom: 1px solid #ebedf2">
                        <div class="card-header" id="headingOne4">
                            <div class="card-title" data-toggle="collapse" data-target="#collapse-info" aria-expanded="true" aria-controls="collapse-info">
                                <i class="flaticon-info"></i> File Manager Tips
                            </div>
                        </div>
                        <div id="collapse-info" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-info" style="">
                            <div class="card-body">
                                <div>Create Folder dan Upload File dapat dilakukan pada tombol kiri atas</div>
                                <div>Untuk Hapus dan Rename dapat klik kanan pada icon file/foldernya</div>
                                <div>Fitur Pencarian hanya dapat digunakan pada Folder yang sedang aktif</div>
                                <div>File yang didukung stream adalah PDF, JPG, PNG</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="kt-portlet__head">

            <div class="kt-portlet__head-label">

                <h3 class="kt-portlet__head-title">
                <i class="fa fa-cubes"></i> List File @if(count($name['result']) > 0){{$name['result']['name']}}@endif</b>
                </h3>
                &nbsp;&nbsp;

                @if($name['result'] != null)

            <a href='{{ env("APP_URL").'file/'.$name['result']['id_parent']}}' class='kt-badge  kt-badge--info kt-badge--inline kt-badge--pill'>
                    Up One Level
                  </a>
                @endif


             </div>





                <div class="kt-portlet__head-toolbar">
                    <form action="{{ env('APP_URL').'file/'.$id }}" id="searchFile" method="GET">


                    <div class="input-group">
                        <input type="text" name="searchFile" value="{{$searchFile}}" class="form-control" placeholder="Search for File">
                        <div class="input-group-append">
                        <button class="btn btn-primary"  type="submit">Go!</button>
                        </div>
                    </div>

                </form>
                </div>

        </div>

        <div class="kt-portlet__body">
            @include('layouts.notification')


           <div class="row">
            @if (!empty($result))
            @foreach ($result as $item => $value)
               <div class="col-md-2">
                   <div class="kt-demo icon">
                       <div class="kt-demo-icon__preview">
                         @if($value['type'] == 'folder')
                       <a href="{{env('APP_URL').'file/'.$value['id']}}">
                       <button class="context-menu-one buttonIco" title="{{$value['name']}}" val="{{ $value['id'] }}"><i class="flaticon-folder"></i></button>
                       </a>

                         @else
                         {{-- <a href="{{env('AWS_URL').$value['path']}}">
                         <button class="buttonIco"><i class="fa-file-pdf"></i>
                         </button> --}}
                            @if (strpos($value['path'], "pdf"))
                        <a href="{{url('pdf-show').'?image='.$value['path']}}" target="_blank" class="context-menu-one" val="{{$value['id']}}"><i class="fa-file-pdf" title="{{$value['name']}}"></i>Lihat pdf</a>
                            @elseif(strpos($value['path'], "jpg") || strpos($value['path'], "png"))
                        <img alt="5" src="{{url('image-show').'?image='.$value['path']}}"  class="context-menu-one img-thumbnail" width="50" val="{{$value['id']}}" onClick="javascript:openModal('{{url('image-show').'?image='.$value['path']}}')" title="{{$value['name']}}">

                            @else
                        <button class="context-menu-one" title="{{$value['name']}}"><i class="fa-file-pdf"></i>
                            </button>
                            @endif
                         @endif

                       </div>
                       <div class="kt-demo-icon__class">
                           {{ $value['name'] }}
                       </div>
                   </div>
               </div>
               @endforeach
               @else
                   Folder is Empty
               @endif
		        <!--begin::Portlet-->

                <!--end::Portlet-->

		    </div>
	    </div>
    </div>

     {{-- begin: modal --}}
     <div class="modal fade" id="openImage" tabindex="-1" role="dialog" aria-labelledby="openImageLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 90%;" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="gambar" src="" style="max-width:100%;">
            </div>
        </div>
        </div>
    </div>
   {{-- end: modal --}}

    {{-- Modal Upload File --}}
    <div class="modal fade" id="uploadFile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    Upload File
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div style="modal-body container">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">



                      <form action="{{route('file.upload', $id)}}" id="uploadFile" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group container">
                            <br>
                            <div></div>
                            <div class="custom-file">
                                  <input type="file" class="custom-file-input" id="myfile" name="file">
                                  <label class="custom-file-label" for="customFile">Choose file</label>
                                  <input type="hidden" name="type" value="file">
                            </div>
                        </div>

            </div>
                    <button type="submit" class="btn btn-primary"><i class="fa flaticon-upload"></i> Upload File</a>
                </form>
                </div>
            </div>
        </div>

    {{-- Modal Create Folder --}}
    <div class="modal fade" id="createFolder" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    Create Folder
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div style="modal-body">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                      <form action="{{route('file.upload', $id)}}" id="uploadFile" method="POST">
                        @csrf
                        <br>
                        <div class="form-group container">

                            <input type="text" class="form-control folder-name" name="name" placeholder="Folder Name">
                                <input type="hidden" name="type" value="folder">
                        </div>

            </div>

                    <button type="submit" class="btn btn-primary btn-upload"><i class="fa fa-paper-plane"></i> Create</a>
                </form>
                </div>
            </div>
        </div>


            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                           Rename Folder/File
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div style="modal-body">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                              <form action="" id="renameFile" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label for="myfile">Folder Name:</label>
                                    <input type="text" class="form-control folder-name" id="renameField" name="name" placeholder="Folder Name" value="">
                                        <input type="hidden" name="type" value="folder">
                                </div>

                    </div>
                            <button type="submit" class="btn btn-primary btn-upload"><i class="fa fa-paper-plane"></i> Create</a>
                        </form>
                        </div>
                    </div>
                </div>

@endsection

@section('custom-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
	<script src="{{ url('assets/js/custom/treeview.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>

    <script type="text/javascript">


        $('.folder-name').keypress(function(e){
            var chr = String.fromCharCode(e.which);
            if ("1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM-_ ".indexOf(chr) < 0)
            return false;

        });



		$( document ).ready(function() {
            $('.btn-upload').click(function () {
                var btn = $(this);
                $(btn).buttonLoader('start');
         });

		    console.log( "ready!" );

            $(function() {
        $.contextMenu({
            selector: '.context-menu-one',
            callback: function(key, options) {
                var m = key;
                var k = $(this).attr('val');
                var j = "{{ env("APP_URL").'file/rename/' }}" +k;
                var r = $(this).attr('title');

                if(m == 'delete'){
                    event.preventDefault();

            var me = $(this),
                url = "{{ env("APP_URL").'file/delete/' }}" +k,
                title = me.attr('title'),
                csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Are you sure want to delete ' + title + ' ?',
                text: 'Folder Harus dalam keadaan Kosong!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: {
                            '_method': 'DELETE',
                            '_token': csrf_token
                        },
                        success: function (response) {
                            $('#loading').hide();
                            // console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: 'Folder Harus Kosong!'
                                });
                            }
                            if (response.status == "success") {
                                swal.fire({
                                    type: 'success',
                                    title: 'Success!',
                                    text: 'Data has been deleted!'
                                });
                                location.reload();
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                    });
                }
            });
                }

                else{
                    $('#renameFile').attr("action", j);
                   $('#renameField').attr('value', r)
                   $("#myModal").modal('show');
                }



            },
            items: {
                "edit": {name: "Rename", icon: "edit"},

                "delete": {name: "Delete", icon: "delete"},
            }
        });


    });
		});


    </script>

    <script>
        function openModal(data) {
            $('#gambar').attr("src", data);
            $('#openImage').modal('show');
        }
    </script>
@endsection