@extends('layouts.app')
@section('content')

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/css/fileinput.min.css" rel="stylesheet" />

<div class="main-container container-fluid">
    <div class="page-header">
        <h1 class="page-title">Template Images <small> List & Management</small></h1>
        <a href="{{ url('project_templates') }}" class="btn btn-primary d-grid mb-3">Back to Templates</a>
    </div>
    <div class="card radius-10">
        <div class="card-body">
            @csrf
            <div class="file-loading">
                <input id="project_template_images" name="project_template_images[]" type="file" multiple>
            </div>
        </div>
    </div>
</div>
{{-- {{dd($items)}} --}}
@stop

@section('scripting')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/themes/fas/theme.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $("#project_template_images").fileinput({
            theme: 'fa5',
            uploadUrl: "{{ url('project_template/image/store/' . $projectTemplate->id) }}",
            maxFileCount: 10,
            uploadExtraData: function() {
                return {
                    _token: $("input[name='_token']").val(),
                };
            },
            allowedFileExtensions: ['jpg', 'jpeg', 'png'],
            overwriteInitial: false,
            maxFileSize: 4096,
            initialPreviewAsData: true, 
            slugCallback: function(filename) {
                return filename.replace(/[()\[\]\s]/g, '_');
            },
            initialPreview: [
                @foreach($items as $item)
                '{{ asset("storage/project_templates/thumbs/" . $item->image) }}',
                @endforeach
            ],
            initialPreviewConfig: [
                @foreach($items as $item) {
                    caption: "{{ $item->image }}",
                    downloadUrl: '{{ asset("storage/project_templates/thumbs/" . $item->image) }}',
                    key: '{{ $item->id }}',
                    extra: {
                        _token: $("input[name='_token']").val(),
                    }
                },
                @endforeach
            ],
            deleteUrl: "{{ url('project_template/image/delete') }}",
        }).on('filesorted', function(e, params) {
            console.log('File sorted params', params);
        });

    });
</script>

@stop