Eu tenho um formulário de cadastro de empresas, dentro desse cadastro, a empresa pode ter 'n' certificados.
Esses certificados devem ser adicionados ao formulário de acordo com a necessidade.
Como posso fazer isso no Laravel? Já tentei com Jquery (transformando os campos em arrays, exemplo, "name='certificate[]'") mas não consegui.
Existe alguma outra forma de fazer isso sem ser com Jquery?
Código dos formulários abaixo (ambos Blade).
Formulário base:
<?php ?>
<div class="row">
<div class="col-md-6">
<div class="form-group{{ $errors->has('simplesNacional') ? ' has-danger' : '' }}">
<label for="name">Simples Nacional</label>
@if(!$clientPassword)
<input type="text" class="form-control" placeholder="Simples Nacional" name="simplesNacional" value="{{ old('simplesNacional') }}" required autofocus>
@else
<input type="text" class="form-control" placeholder="Simples Nacional" name="simplesNacional" value="{{$clientPassword->simplesNacional}}">
@endif
@if ($errors->has('simplesNacional'))
<span class="help-block">
<strong>{{ $errors->first('simplesNacional') }}</strong>
</span>
@endif
</div>
</div>
<div class="col-md-6">
<div class="form-group{{ $errors->has('siare') ? ' has-danger' : '' }}">
<label for="name">SIARE</label>
@if(!$clientPassword)
<input type="text" class="form-control" placeholder="SIARE" name="siare" value="{{ old('siare') }}" required autofocus>
@else
<input type="text" class="form-control" placeholder="SIARE" name="siare" value="{{$clientPassword->siare}}">
@endif
@if ($errors->has('siare'))
<span class="help-block">
<strong>{{ $errors->first('siare') }}</strong>
</span>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4>Certificados</h4>
</div>
</div>
<div class="row">
<div class="col-md-3">
<button type="button" id="addDigitalCertificate" class="btn btn-primary">Adicionar certificado digital</button>
</div>
</div>
<div id="digitalCertificates">
</div>
Campos do formulário do certificado (que precisa ser adicionado ao formulário base ao clicar no botão 'Adicionar certificado digital'.)
<div class="row">
<div class="col-md-2">
<div class="form-group{{ $errors->has('issueDate') ? ' has-danger' : '' }}">
<label for="issueDate">Data de emissão</label>
@if(!$digitalCertificate)
<input type="date" class="form-control" placeholder="Data de emissão" name="issueDate" value="{{ old('issueDate') }}" required autofocus>
@else
<input type="date" class="form-control" placeholder="Data de emissão" name="issueDate" value="{{$digitalCertificate->issueDate}}">
@endif
@if ($errors->has('issueDate'))
<span class="help-block">
<strong>{{ $errors->first('issueDate') }}</strong>
</span>
@endif
</div>
</div>
<div class="col-md-2">
<div class="form-group{{ $errors->has('expirationDate') ? ' has-danger' : '' }}">
<label for="expirationDate">Data de expiração</label>
@if(!$digitalCertificate)
<input type="text" class="form-control" placeholder="Data de esxpiração" name="expirationDate" value="{{ old('expirationDate') }}" required autofocus>
@else
<input type="text" class="form-control" placeholder="Data de esxpiração" name="expirationDate" value="{{$digitalCertificate->expirationDate}}">
@endif
@if ($errors->has('expirationDate'))
<span class="help-block">
<strong>{{ $errors->first('expirationDate') }}</strong>
</span>
@endif
</div>
</div>
<div class="col-md-8">
<div class="form-group{{ $errors->has('certifyingEntity') ? ' has-danger' : '' }}">
<label for="certifyingEntity">Certificadora</label>
@if(!$digitalCertificate)
<input type="text" class="form-control" placeholder="Certificadora" name="certifyingEntity" value="{{ old('certifyingEntity') }}" required autofocus>
@else
<input type="text" class="form-control" placeholder="Certificadora" name="certifyingEntity" value="{{$digitalCertificate->certifyingEntity}}">
@endif
@if ($errors->has('certifyingEntity'))
<span class="help-block">
<strong>{{ $errors->first('certifyingEntity') }}</strong>
</span>
@endif
</div>
</div>
</div>
EDIT:
Não encontrei uma forma de fazer isso sem Jquery, mas pelo menos deu pra solucionar o problema.
Removi algumas validações que o Blade faz em conjunto com o laravel e depois criei um arquivo JS para clonar os campos.
Form do certificado:
<div id="digitalCertificates">
<div class="teste">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="certificate[][issueDate]">Data de emissão</label>
<input type="date" class="form-control" placeholder="Data de emissão" name="certificate[][issueDate]" required autofocus>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="certificate[][expirationDate]">Data de expiração</label>
<input type="text" class="form-control" placeholder="Data de esxpiração" name="certificate[][expirationDate]" required autofocus>
</div>
</div>
<div class="col-md-8">
<div class="form-grou">
<label for="certificate[][certifyingEntity]">Certificadora</label>
<input type="text" class="form-control" placeholder="Certificadora" name="certificate[][certifyingEntity]" required autofocus>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="certificate[][type]">Tipo</label>
<select name="certificate[][type]" class="form-control" required>
<option value="">Selecione um tipo</option>
@foreach($types as $type)
<option value='{{ $type }}'>{{ $type }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="certificate[][subType]">Subtipo</label>
<select name="certificate[][subType]" class="form-control" required>
<option value="">Selecione um subtipo</option>
@foreach($subTypes as $subType)
<option value='{{ $subType }}'>{{ $subType }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="certificate[][physicalLocation]">Localização física</label>
<input type="text" class="form-control" placeholder="Localização física" name="certificate[][physicalLocation]" required autofocus>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="form-check">
<input type="checkbox" class="form-check-input" name="certificate[][inPossession]" required autofocus>
<label class="form-check-label" for="certificate[][inPossession]">Em posse</label>
</div>
</div>
<div class="col-md-2">
<button class="removerCampo btn btn-danger">Remover certificado</button>
</div>
</div>
<hr>
</div>
</div>
JS que clona os campos:
$(function () {
hideBtnDel();
function hideBtnDel() {
if ($("#digitalCertificates .teste").length <= 1) {
$("#digitalCertificates .teste .removerCampo").addClass('disabled');
}else{
$("#digitalCertificates .teste .removerCampo").removeClass('disabled');
}
removeCampo();
}
function removeCampo() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
$(this).parents('.teste').remove();
hideBtnDel();
});
}
$("#addDigitalCertificate").click(function () {
event.preventDefault();
novoCampo = $("#digitalCertificates .teste:first").clone();
novoCampo.find("input").val("");
novoCampo.insertAfter("#digitalCertificates .teste:last");
hideBtnDel();
});
});