@once
    <link rel="stylesheet"
        href="{{ asset('assets/css/document-index.css') }}?v={{ filemtime(public_path('assets/css/document-index.css')) }}">
@endonce

<div class="sl-documents-grid">
    @foreach ($documents as $document)
        @if (!$document->document_protocol)
            @include('documents.card')
        @else
            @include('documents.card')
        @endif
    @endforeach
</div>

<div class="clearfix"></div>

<div class="sl-documents-pagination">
    {!! $documents->appends(request()->input())->render('pagination::bootstrap-4') !!}
</div>

<div id="modalScanner" class="modal fade sl-document-card__scanner-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Scanner</h4>
            </div>
            <div class="modal-body">
                <form id="formScannerCard">
                    <input type="hidden" id="document-scanner-id" name="document_id" value="">

                    @csrf
                    <div class="form-group col-sm-12">
                        <h1 class="sl-document-card__scanner-title"> Digitalização de documentos </h1>

                        <div class="sl-document-card__scanner-response" id="server_response"></div>
                        <div class="form-group col-md-6">
                            {!! Form::label('filename', 'Nome:') !!}
                            {!! Form::text('filename', null, ['class' => 'form-control']) !!}
                        </div>

                        {!! Form::label('digitalizar', 'Clique no botão para iniciar: ') !!}
                        {!! Form::button('Abrir Scan', [
                            'type' => 'button',
                            'class' => 'btn btn-lixo',
                            'onclick' => 'scanToPdfWithThumbnails();',
                        ]) !!}

                        {!! Form::button('Enviar', [
                            'type' => 'submit',
                            'class' => 'btn btn-primary',
                        ]) !!}
                    </div>
                </form>
            </div>
            <div class="clearfix sl-document-card__clear-padding"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<div id="documentSearchResultModal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header sl-document-search-result-modal__header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="documentSearchResultModalTitle">
                    <i class="fa fa-search-plus sl-document-search-result-modal__icon" aria-hidden="true"></i>
                    Resultado da busca
                </h4>
            </div>
            <div class="modal-body sl-document-search-result-modal__body">
                <div id="documentSearchResultModalContent" class="sl-document-search-result-modal__content"></div>
            </div>
            <div class="modal-footer sl-document-search-result-modal__footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<script>
    function openDocumentSearchResultModal(contentId, title) {
        var contentElement = document.getElementById(contentId);

        if (!contentElement) {
            return;
        }

        document.getElementById('documentSearchResultModalTitle').textContent = title || 'Resultado da busca';
        document.getElementById('documentSearchResultModalContent').innerHTML = contentElement.innerHTML;
        $('#documentSearchResultModal').modal('show');
    }
</script>

<div id="answer" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Responder Documento</h4>
            </div>
            <form method="POST" action="{{ route('document.reply') }}" enctype="multipart/form-data" name="reply-form"
                id="reply-form">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="document_id" id="document_id">

                    <div class="form-group col-sm-12">
                        <label>
                            Descrição:
                            <textarea name="comissionDescriprion" id="comissionDescriprion" class="form-control descricao ckeditor"></textarea>
                        </label>
                    </div>

                    <div class="form-group col-sm-12">
                        {!! Form::label('file[]', 'Anexo de Resposta:') !!}
                        {!! Form::file('file[]', ['multiple' => true, 'class' => 'file']) !!}
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-success pull-right">Salvar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="modalProtocol" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Protocolo de documento</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" name="document_id" id="document_id">
                <input type="hidden" name="next_number_origin" id="next_number_origin">
                <div class="form-group col-sm-4">
                    {!! Form::label('protocol_date', 'Data:') !!}
                    {!! Form::text('protocol_date', null, ['class' => 'form-control ', 'id' => 'protocol_date', 'required']) !!}
                </div>

                <div class="form-group col-sm-4">