@can('access', 'record.actions.store')
    <div class="collapse" id="collapseActions">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Realizar una actuación</h5>
            </div>
            <div class="card-body">
                <form
                    id="actionForm"
                    class="dropzone"
                    enctype="multipart/form-data"
                >
                    @csrf
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <x-forms.label>Mensaje</x-forms.label>
                                <x-forms.textarea
                                    name="description"
                                    :value="old('description')"
                                    placeholder="Mensaje"
                                />
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <x-forms.label>Adjuntar documentaci&oacute;n</x-forms.label>
                                <div class="fallback">
                                    <input name="attachments" type="file" multiple>
                                </div>
                                <div id="cont_dropzone">
                                    <div class="dz-message needsclick">
                                        <div class="dropzone-previews"></div>
                                        <button type="button" class="dz-button btn p-2 mb-3">Arrastre o haga clic aquí para adjuntar sus archivos</button>
                                        <br>
                                        <span class="note needsclick">(Puede seleccionar más de un archivo o arrastrar varias veces)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <button id="submitActionForm" type="submit" class="btn btn-info float-right">
                                Guardar actuación
                                <i class="mi-send ml-2"></i>
                            </button>
                            <button type="button" class="btn btn-danger float-left"  data-toggle="collapse" data-target="#collapseActions">
                                Cancelar
                                <i class="mi-cancel ml-2"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script type="text/javascript">
            Dropzone.options.actionForm = {
                acceptedFiles: 'image/*,application/pdf',
                addRemoveLinks: true,
                autoProcessQueue: false,
                dictInvalidFileType: 'El formato del archivo seleccionado no es válido',
                dictRemoveFile: 'Eliminar',
                maxFiles: 100,
                paramName: 'attachments',
                parallelUploads: 100,
                previewsContainer: '.dropzone-previews',
                uploadMultiple: true,
                url: "{{ route('record.actions.store', [$record->id, $record->latestMove->id]) }}",

                init: function() {
                    var myDropzone = this;

                    this.element.querySelector("#submitActionForm").addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        if (myDropzone.getQueuedFiles().length > 0) {
                            myDropzone.processQueue();
                        } else {
                            var blob = new Blob();
                            blob.upload = {chunked: myDropzone.defaultOptions.chunking};
                            myDropzone.uploadFile(blob);
                        }
                    });

                    this.on("sendingmultiple", function() {
                        //
                    });

                    this.on("successmultiple", function(files, response) {
                        window.location.replace("{{ url()->current() }}")
                    });

                    this.on("errormultiple", function(files, response) {
                        $.each(myDropzone.files, function(i, file) {
                            file.status = Dropzone.QUEUED;
                        });

                        $('#actionForm').prepend(`<div class="alert alert-danger alert-styled-left alert-dismissible"><button type="button" class="close" data-dismiss="alert"><span>&times;</span></button><span class="font-weight-semibold">${response.error}</span></div>`);
                    });

                    $('#actionForm').removeClass('dropzone');
                    $('#cont_dropzone').addClass('dropzone');
                }
            };
        </script>
    @endpush
@endcan