@extends('form.corpo')
@section('corpo')
<link rel="stylesheet" href="{{url('')}}/css/fileinput.min.css" type="text/css">
        <div style="margin: 6vh">
            <form method="POST" action="{{ routeTenant('site.form.documentos', ['type' => $type]) }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" value="{{$form->token}}" name="dado_id">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 style="font-weight: bold; color: #0A246A;"> <i style="font-size: 25px;" class="fa fa-file"></i> Enviar Documentos</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered table-condensed container-items">
                            <tbody id="conteudo-tabela">
                                <tr>
                                    <th style="width: 50%;text-align: center;">Descrição</th>
                                    <th style="width: 30%; text-align: center;">Arquivo</th>
                                    <th style="width: 10%; text-align: center;">Açãoo</th>
                                </tr>
                                    
                            </tbody>
                        </table>
                    </div>
                </div>
                <button type="button" class="btn btn-primary add-item">Adicionar Documento</button>
                <input type="submit" class="btn btn-success pull-right" style="font-weight: bold; padding: 10px;" value="Enviar Documentos">
            </form>
        </div>
<script>
    $('#conteudo-tabela').on('change', 'input[type="file"]', function () {
    var fileName = $(this).val().split('\\').pop(); // nome do arquivo do input file
    // atualiza o campo de legenda/label adjacente, se existir
    $(this).closest('.file-input').find('input.file-caption-name').val(fileName).trigger('input');
});

    function readURL(input) {

        var url = input.value;

        $('input[name='+input.id+']').val(url);
    }

    function deletar(id) {

        var url = id;

        $('.item-'+url+'').remove();
    }

    var count = 0;
    $(".add-item").click(function() {
         var newRow = `
            <tr class="item item-${count}">
                                        <td>
                                            <div class="form-group field-arquivo-${count}-tipo_documento_id required">
                                                <select class="form-control" name="Arquivo[${count}][tipo_documento_id]" id="">
                                                    @foreach($documentos as $documento)
                                                        <option value="{{ $documento->id }}">{{ mb_strimwidth($documento->descricao, 0, 100, "...") }}</option>
                                                    @endforeach
                                                </select>
                                                <p class="help-block help-block-error"></p>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group field-arquivo-${count}-file">
                                                <input type="hidden" name="Arquivo[${count}][file]" value=""><div class="file-input file-input-new">
                                                    <div class="kv-upload-progress kv-hidden" style="display: none;"><div class="progress">
                                                            <div class="progress-bar bg-success progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                                                                0%
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                    <div class="input-group file-caption-main">
                                                        <div class="file-caption form-control kv-fileinput-caption" tabindex="500">
                                                            <span class="file-caption-icon"></span>
                                                            <input class="file-caption-name" name="arquivo-${count}" onkeydown="return false;" onpaste="return false;">
                                                        </div>
                                                        <div class="input-group-btn input-group-append">
                                                            <button type="button" tabindex="500" title="Remover ficheiros seleccionados" class="btn btn-default btn-secondary fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-trash"></i> <span class="hidden-xs">Remover</span></button>
                                                            <button type="button" tabindex="500" title="Abortar carregamento " class="btn btn-default btn-secondary kv-hidden fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i> <span class="hidden-xs">Cancelar</span></button>

                                                            <div tabindex="500" class="btn btn-primary btn-file">
                                                                <i class="glyphicon glyphicon-folder-open"></i>&nbsp;
                                                                <span class="hidden-xs">Selecione</span><input type="file" id="arquivo-${count}" class="form-control" name="Arquivo[${count}][file]" data-krajee-fileinput="fileinput_f93e59fe" @if($documento->obrigatorio == 1)required @endif>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <p class="help-block help-block-error"></p>
                                            </div>
                                        </td>
                                        <td style="padding-top: 5px; text-align: center;">
                                            <button type="button" class="btn btn-danger" onclick="deletar(${count})">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
         `;
         $("#conteudo-tabela").append(newRow);
         count++;
    });
$(document).ready(function(){
    $('.add-item').click();
});


</script>
@endsection