@extends('layouts.admin-app')
@push('styles')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
@endpush

@section('content')
    @include('parts.admin-header')
    <div class="page-body-wrapper sidebar-icon">
    @include('parts.scrollbar')
        <div class="page-body">
            @include('parts.navigation', ['title' => 'Files' , 'breadcrumbs' => ['Files' => false]])
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-8 col-sm-10 col-md-12">
                                        <form action="{{route('admin.files.store')}}" class="needs-validation" novalidate="" method="post">
                                            {{csrf_field()}}
                                            <input type="file" data-url="{{url('/admin/filepond')}}" class="filepond" multiple>
                                            <div class="row justify-content-center">
                                                <div class="col-1">
                                                    <button class="btn btn-info" id="save-file" disabled type="submit">Save</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @if(!$files->isEmpty())
                                <div class="table-responsive">
                                    <table class="table card-table table-vcenter text-nowrap">
                                        <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Original name</th>
                                            <th>Description</th>
                                            <th>Status</th>
                                            <th>Type</th>
                                            <th>Level</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($files as $file)
                                            <tr>
                                                <td><p class="text-inherit">{{$file->title}}</p></td>
                                                <td><p class="text-inherit">{{strlen($file->file_name) > 50 ? substr($file->file_name,0,30)."..." : $file->file_name}}</p></td>
                                                <td><p class="text-inherit">{{strlen($file->description) > 50 ? substr($file->description,0,30)."..." : $file->description}}</p></td>
                                                <td><p class="text-inherit">{{$file->statusName()}}</p></td>
                                                <td><p class="text-inherit">{{$file->typeName()}}</p></td>
                                                <td><p class="text-inherit">{{$file->levelName()}}</p></td>
                                                <td class="text-right">
                                                    <a href="{{route('admin.files.edit', [$file->id])}}" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i> Edit</a>
                                                    <a href="" class="btn btn-danger btn-sm js-destroy-record"
                                                       data-toggle="modal"
                                                       data-target="#destroy"
                                                       data-title="File delete"
                                                       data-text="Are you sure you want to delete this file?"
                                                       data-token="{{csrf_token()}}"
                                                       data-url="{{route('admin.files.destroy', [$file->id])}}"><i class="fa fa-trash"></i> Delete</a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('parts.modal-delete')
@endsection
@push('scripts')
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="{{asset('assets/js/form-validation-custom.js')}}" ></script>
<script>
    $(document).ready(function() {
        const inputElement = document.querySelector('input[type="file"]');
        const pond = FilePond.create( inputElement );
        var url = inputElement.dataset.url;
        var filesCount = 0;
        pond.setOptions({
            name: 'file[]',
            maxFiles: 5,
            server: url,
            chunkUploads: true,
            chunkRetryDelays: [500, 1000, 3000]
        });
        pond.on('processfile', function (error, file) {
            if(file){
                filesCount += 1;
                if(filesCount == $('.filepond--item').length)
                $('#save-file').prop('disabled', false);
            }
        });
        pond.on('removefile', function (error, file) {
            if(file && $('.filepond--item').length == 1){
                filesCount--;
                $('#save-file').prop('disabled', true);
            }
        });
    });
</script>
@endpush