@extends('layouts.app')

@section('content')

    @if(Session::has('success_message'))
        <div class="alert alert-success">
            <i class=" fas fa-fw fa-check" aria-hidden="true"></i>
            {!! session('success_message') !!}

            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button>

        </div>
    @endif

    <div class="card">

        <div class="card-header bg-primary text-white">

            <h5  class="my-1 float-left">ระบบจัดการ ไฟล์</h5>

            <div class="btn-group btn-group-sm float-right" role="group">
                <a href="{{ route('files.file.create') }}?type=file" class="btn btn-success" title="เพิ่ม File ใหม่">                     
					<i class="fas fa-fw  fa-plus" aria-hidden="true"></i>
                </a>
            </div>

        </div>
        
        @if(count($files) == 0)
            <div class="card-body text-center">
                <h4>ไม่พบข้อมูล Files</h4>
            </div>
        @else
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-striped table-sm datatable">
                    <thead>
                        <tr>  <th>#</th>
                                <th>ชื่อไฟล์เอกสาร</th>
                            <th>วันที่อัพ</th>
                            <th>url</th>
                            <th>ผู้อัพโหลด</th>

                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                                         @foreach($files as $file)
                        <tr> <td>{{ ++ $r}}</td>
                                <td>
                                @if( $file->is_image=='YES')
                                <img src="{{asset( $file->file)}}" style="width:150px;" onClick="window.open('{{asset( $file->file)}}');">
                                @else
                                {{ $file->name }}
                                @endif
                                </td>
                            <td data-order="{{date('YmdHi',strtotime($file->created_at))}}"><small>{{  $thai->DateThaiShort($file->created_at) }}</small></td>                            
                            <td><div style="max-width:200px" id="file_{{$file->id}}"><small >{{ urldecode(route('guest.getfile.byid',[$file->id,$thai->no_special_char($file->name)]))  }}</small><button class="btn btn-sm btn-mute" onClick="CopyToClipboard('file_{{$file->id}}')"><i class="far fa-copy"></i></button> 
                          </div>
                          <div style="max-width:200px" id="file_x{{$file->id}}"><small >  {{urldecode(route('guest.getfilepage.byid',[$file->id,$thai->no_special_char($file->name)]))}}</small>
                          <button class="btn btn-sm btn-mute" onClick="CopyToClipboard('file_x{{$file->id}}')"><i class="far fa-copy"></i></button> </td>
                            <td>{{ optional($file->user)->name }}</td>

                            <td>

                                <form method="POST" action="{!! route('files.file.destroy', $file->id) !!}" accept-charset="UTF-8">
                                <input name="_method" value="DELETE" type="hidden">
                                {{ csrf_field() }}

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
 

  <div class="btn-group " role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
     <i class="fas fa-cogs"></i>
    </button>
<div class="dropdown-menu">
                                        <a href="{{ route('files.file.show', $file->id ) }}" class="dropdown-item bg-info text-white" title="แสดงข้อมูล File">
                                            <i class=" fas fa-fw fa-eye" aria-hidden="true"></i> ดู
                                        </a>
                                        <a href="{{ route('files.file.edit', $file->id ) }}" class="dropdown-item bg-primary text-white" title="แก้ไขข้อมูล File">
                                            <i class=" fas fa-fw fa-pencil-alt" aria-hidden="true"></i>  แก้ไข
                                        </a>

                                        <button type="submit" class="dropdown-item bg-danger text-white" title="ลบ File ทิ้ง" onclick="return confirm(&quot;คลิก OK เพื่อยืนยันการลบ File&quot;)">
                                            <i class=" fas fa-fw fa-trash-alt" aria-hidden="true"></i> ลบ
                                        </button>
                                    </div>
  </div>
</div>


                                    

                                </form>
                                
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

            </div>
        </div>

             <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" >
  <div class="toast fade hide" style="position: fixed; top: 50%; right: 50%;" data-delay="3000">
 
    <div class="toast-body">
     <img src="{{asset('copy.png')}}" style="width:60px"><span class="text-success" style="font-weight:500" >คัดลอก Link แล้ว</span>
    </div>
  </div>
</div>
        @endif
    
    </div>
@endsection
@section('style') 
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
@endsection
@section('script')
<script>
function CopyToClipboard(containerid) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy");
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().addRange(range);
    document.execCommand("copy");
    //alert("Text has been copied, now paste in the text-area");
 
	$('.toast').toast('show')
  }
}
</script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> 
 
<script>
$(function() {
  var t =   $('.datatable').DataTable({
   
		
		 
		
			"language": {
            "lengthMenu": "แสดง _MENU_ รายการต่อหน้า",
            "zeroRecords": "ไม่พบรายการที่ค้นหา",
            "info": "แสดง หน้า _PAGE_ จาก _PAGES_",
            "infoEmpty": "ไม่มีข้อมูล",
			 "search": "ค้นหา",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
		"paginate": {
        "first":      "หน้าแรก",
        "last":       "หน้าสุดท้าย",
        "next":       "ถัดไป",
        "previous":   "ก่อนหน้า"
    },
		 "lengthMenu": [[10, 20, 50, 100, -1], [10,20, 50, 100, "ทั้งหมด"]],
		  "order": [[ 2, "desc" ]]
    });
	
		 
	
});
</script>
@endsection