@if(!isset($readOnly))
    @php($readOnly = false)
@endif

@if(!isset($actAsOwner))
    @php($actAsOwner = false)
@endif

@if($actAsOwner)
    @php($archive->setTempOwner())
@endif

<div class="card" id="{{$name}}_div">
    <div class="card-header" role="tab">
        <span id="parents_ids"></span>
        @if(!$readOnly)
            <button id="upload_files" type="button" class="btn btn-sm btn-secondary float-right" action=''>Add <span
                        id="upload_files_progress_text"></span></button>
        @endif
    </div>
    <div>
        <div id='upload_files_progress_bar' style="background-color: green; width: 0%; height: 2px;"></div>
    </div>
    <div class="card-body">
        <table id="archive_table" class="display" style="width:100%">
            <thead>
            <tr>
                <th width="50%">@lang('tr.Name')</th>
                <th width="20%">@lang('tr.Size')</th>
                <th width="20%">@lang('tr.Date')</th>
                <th width="5%"></th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script type="text/javascript">

    $.fn.loadArchive = function (options) {

        var archiveDiv = $(this);

        options.currentArchiveID = options.archiveID;

        var table = archiveDiv.find('#archive_table').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            stateSave: false,
            rowId: 'id',
            lengthChange: true,
            info: true,
            paging: true,
            "ajax": {
                "url": options.archiveURL.replace('#id', options.archiveID),
                "dataSrc": "data.data"
            },
            "columns": [
                {
                    "data": "title", "name": "title",
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                        var icon, link, html;

                        if (oData.type == 0)
                            icon = "icon-folder";
                        else if (oData.type == 1)
                            icon = "icon-file-text";
                        else
                            icon = "icon-file-empty";
                        icon = "<i class='" + icon + " archive-icon'></i> ";

                        if (oData.type == 0)
                            link = "id='" + oData.id + "' class='archive_link' href='javascript:void(0)'";
                        else if (oData.type == 1)
                            link = "href='javascript:void(0)'";
                        else
                            link = "href='" + options.downloadFileURL.replace('#sid', oData.sid) + "'";

                        html = "<div style='display:inline-block;'>" + icon + "</div><div style='display:inline-block'><a title='" + oData.en_title + "' " + link + ">" + oData.title + "</a></div>";

                        $(nTd).html(html);
                    }
                },
                {
                    "data": "size", "name": "size",
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        if (oData.type == 0)
                            $(nTd).html("-");
                        else
                            $(nTd).html(fileSizeText(oData.size));
                    }
                },
                {
                    "data": "created_at", "name": "created_at",
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<span>" + renderDateTime(oData.updated_at) + "</span>");
                    }
                },
                {
                    "data": "id", "name": "id",
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        var html = "";
                        if (oData.flags & 0x2 && !options.readOnly) {
                            html += "<a title='Delete' class='delete_archive' href='javascript:void(0)'><i class='icon-delete'></i></a>&nbsp;";
                        }
                        $(nTd).html("<span class='action-column'>" + html + "</span>");
                    }
                },
            ],
            "searchCols": [
                {"search": options.archiveID},
            ],
            drawCallback: function (settings, json) {

                archiveDiv.find("#upload_files").attr('action', options.uploadFilesURL.replace('#id', options.archiveID));

                $.get(options.parentsURL.replace('#id', options.currentArchiveID).replace('#root_id', options.archiveID), {}, function (data, textStatus, xhr) {
                    archiveDiv.find('#parents_ids').html("");
                    for (var i = 0; i < data.length; i++) {
                        if (i < (data.length - 1)) {
                            archiveDiv.find('#parents_ids').append("<div style='display:inline-block'><a title='" + data[i].en_title + "' class='archive_link' href='javascript:void(0)' id='" + data[i].id + "'>" + data[i].title + "</a></div>");
                            archiveDiv.find('#parents_ids').append("&nbsp;/&nbsp;");
                        } else {
                            archiveDiv.find('#parents_ids').append("<a title='" + data[i].en_title + "'>" + data[i].title + "</a>");
                        }
                    }

                    archiveDiv.find('.archive_link').on('click', function (event) {
                        event.preventDefault();
                        options.currentArchiveID = $(this).attr('id');
                        table.columns(0).search(options.currentArchiveID);
                        table.draw();
                    });

                    archiveDiv.find('.delete_archive').on('click', function (event) {
                        event.preventDefault();

                        var row = $(this).closest('tr');
                        var data = table.row(row).data();
                        var url = options.deleteURL.replace('#id', data.id);

                        warningBox("Are you sure you want to delete this item (<b>" + data.title + "</b>) ?", function () {
                            $.post(url, {"_token": options.token}, function (response) {
                                row.remove();
                                table.ajax.reload(null, false);
                                infoBox("Item deleted successfully.");
                            }).fail(function (response) {
                                showRepsonseErrors(response);
                            });
                        });
                    });

                });
            },
        });

        archiveDiv.find("#upload_files").uploadFiles({
                token: '{{ csrf_token() }}',
                progressBar: $('#upload_files_progress_bar'),
                progressText: $('#upload_files_progress_text'),
            },
            function (data) {
                table.draw();
            });
    }

    $(document).ready(function () {
        $('#{{ $name }}_div').loadArchive({
            token: '{{ csrf_token() }}',
            archiveID: {{ $archive->id }},
            archiveURL: '{{ route('archive', ['archive'=>'#id']) }}',
            downloadFileURL: '{{ route('secure_download_file')."?sid=#sid" }}',
            uploadFilesURL: '{{ route('upload_files', ['archive'=>'#id']) }}',
            parentsURL: '{{ route('archive_parents', ['archive'=>'#id', 'root_id'=>'#root_id']) }}',
            readOnly: {{($readOnly)?'true':'false'}},
            deleteURL: '{{ route('delete_archive', ['archive'=>'#id']) }}',
        });
    });
</script>