@php
    $documentos = isset($documentos) ? $documentos : collect();
    $tipoDocumento = isset($tipoDocumento) ? $tipoDocumento : null;
    $accionesEdicionOcultas = isset($accionesEdicionOcultas) ? $accionesEdicionOcultas : false;
    $inputName = isset($inputName) ? $inputName : 'documentos[]';
    $fmtDocumento = function ($date) { return \App\Services\BancoFechaService::formatoVista($date); };
    $usuarioDocumento = function ($usuario) { return $usuario ? $usuario->nombre_completo : 'Usuario no disponible'; };
@endphp

@if(!isset($mostrarCarga) || $mostrarCarga)
    <div class="form-group">
        <label>{{ isset($label) ? $label : 'Cargar comprobante' }}</label>
        <div class="banco-documentos-controls">
            <input type="file" class="banco-documentos-input" name="{{ $inputName }}" multiple>
            <input type="text" class="form-control banco-documentos-file-label" value="Sin archivos seleccionados" readonly>
            <button type="button" class="ui button green banco-documentos-trigger"><i class="plus icon"></i>Agregar archivo</button>
        </div>
        <div>
            <small class="text-muted">Los archivos se guardan al registrar el movimiento, cuenta o programación.</small>
        </div>
    </div>
@endif

<script>
    $(document)
        .off('click.bancosDocs', '.banco-documentos-trigger')
        .on('click.bancosDocs', '.banco-documentos-trigger', function () {
            $(this).closest('.form-group').find('.banco-documentos-input').trigger('click');
        });

    $(document)
        .off('change.bancosDocs', '.banco-documentos-input')
        .on('change.bancosDocs', '.banco-documentos-input', function () {
            var $input = $(this);
            var $table = $input.closest('.tab-pane, .modal-body').find('.banco-documentos-table').first();
            var files = this.files || [];
            var now = {!! json_encode(\App\Services\BancoFechaService::ahoraVista()) !!};
            var user = {!! json_encode(isset($usuarioBancos) && $usuarioBancos ? $usuarioBancos->nombre_completo : 'Usuario no disponible') !!};
            var pendingText = $input.data('pending-text') || 'Se guarda al registrar';
            var nombres = [];

            $table.find('.banco-documentos-pendiente').remove();
            for (var j = 0; j < files.length; j++) {
                nombres.push(files[j].name);
            }
            $input.closest('.banco-documentos-controls').find('.banco-documentos-file-label').val(nombres.length ? nombres.join(', ') : 'Sin archivos seleccionados');

            if (!files.length && !$table.find('tbody tr').length) {
                $table.find('tbody').append('<tr class="banco-documentos-empty"><td colspan="5" class="text-center text-muted">Sin documentos cargados.</td></tr>');
                return;
            }

            $table.find('.banco-documentos-empty').remove();
            for (var i = 0; i < files.length; i++) {
                $table.find('tbody').append('<tr class="text-muted banco-documentos-pendiente"><td><span class="status-pill status-muted">Pendiente</span></td><td>' + files[i].name + '</td><td>' + now + '</td><td>' + user + '</td><td>' + pendingText + '</td></tr>');
            }
        });
</script>

<div class="dt-responsive table-responsive">
    <table class="ui celled table unstackable structured banco-documentos-table">
        <thead>
            <tr>
                <th>Archivo</th>
                <th>Nombre archivo</th>
                <th>Fecha y hora de carga</th>
                <th>Cargado por</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($documentos as $documento)
                <tr>
                    <td>
                        @if($tipoDocumento)
                            <a class="btn btn-warning btn-sm" href="{{ route('bancos.real.documentos.descargar', [$tipoDocumento, $documento->getKey()]) }}">Ver archivo</a>
                        @else
                            <span class="status-pill status-muted">Disponible al guardar</span>
                        @endif
                    </td>
                    <td>{{ $documento->nombre_archivo }}</td>
                    <td>{{ $fmtDocumento($documento->fecha_carga) }}</td>
                    <td>{{ $usuarioDocumento($documento->cargadoPor) }}</td>
                    <td>
                        @if($tipoDocumento && !(isset($soloLectura) && $soloLectura))
                            <form method="post" action="{{ route('bancos.real.documentos.eliminar', [$tipoDocumento, $documento->getKey()]) }}" class="{{ $accionesEdicionOcultas ? 'banco-anexos-edicion-only' : '' }}" style="display:{{ $accionesEdicionOcultas ? 'none' : 'inline-block' }};">
                                {{ csrf_field() }}
                                <button type="submit" class="ui button red tiny bancos-confirm-action" data-confirm-title="Eliminar documento" data-confirm-message="¿Deseas eliminar este documento?" data-confirm-text="Sí, eliminar" data-confirm-class="btn-danger"><i class="trash icon"></i></button>
                            </form>
                            @if($accionesEdicionOcultas)
                                <span class="status-pill status-muted banco-anexos-lectura-only">Solo lectura</span>
                            @endif
                        @else
                            <span class="status-pill status-muted">-</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr class="banco-documentos-empty">
                    <td colspan="5" class="text-center text-muted">Sin documentos cargados.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>