<tr id="row{{$i}}" class="text-center input-row" data-row="{{$i}}">
<td>
<input data-date-autoclose="true" name="jobs[{{$i}}][date]" required type="text"
class="form-control datepicker" data-date-format="yyyy-mm-dd"
value="{{ old('jobs.'.$i.'.date') }}"/>
</td>
<td>
<input name="jobs[{{$i}}][line]" required type="text" class="form-control"
value="{{ old('jobs.'.$i.'.line') }}"/>
</td>
<td>
<input name="jobs[{{$i}}][no_container]" required type="text"
class="form-control number" value="{{ old('jobs.'.$i.'.no_container') }}"/>
</td>
<td>
<div class="multiselect_div">
<select name="jobs[{{$i}}][type_containers]" id="multiselect4-filter"
class="multiselect multiselect-custom type_container{{$i}}"
onload="return addMultiSelect({{$i}})">
@php
$type_containers = \App\TypeContainer::all();
@endphp
@foreach ($type_containers as $type)
<option {{ old('jobs.'.$i.'.type_containers') == $type->id ? 'selected' : '' }}
value="{{ $type->id }}"> {{ $type->name }} </option>
@endforeach
</select>
</div>
</td>
<td>
<div class="multiselect_div">
<select name="jobs[{{$i}}][ports]" id="multiselect5-filter"
class="multiselect multiselect-custom type_port{{$i}}"
onload="return addMultiSelect({{$i}})">
@php
$ports = \App\Port::all();
@endphp
@foreach ($ports as $port)
<option {{ old('jobs.'.$i.'.type_containers') == $port->id ? 'selected' : '' }} value="{{ $port->id }}">{{ $port->name }}</option>
@endforeach
</select>
</div>
</td>
<td>
<div class="form-row align-items-center">
<div class="col-md-6">
<input name="jobs[{{$i}}][temperature]" required type="text" class="form-control" value="{{ old('jobs.'.$i.'.temperature') }}"/>
</div>
<div class="col-md-6">
<select name="jobs[{{$i}}][temperatue_type]" required class="form-control" id="temperature_type">
<option {{ old('jobs.'.$i.'.temperature_type') == 'C' ? 'selected' : '' }} value="C">Celcius</option>
<option {{ old('jobs.'.$i.'.temperature_type') == 'K' ? 'selected' : '' }} value="K">Kelvin</option>
<option {{ old('jobs.'.$i.'.temperature_type') == 'F' ? 'selected' : '' }} value="F">Fahrenheit</option>
</select>
</div>
</div>
</td>
<td>
<input name="jobs[{{$i}}][product_code]" required type="text" class="form-control" value="{{ old('jobs.'.$i.'.product_code') }}"/>
</td>
<td>
<input name="jobs[{{$i}}][qty]" required type="text" class="form-control number" onkeypress="return onlyNumberKey(event)" value="{{ old('jobs.'.$i.'.qty') }}"/>
</td>
<td>
<input name="jobs[{{$i}}][notes]" type="text" class="form-control" value="{{ old('jobs.'.$i.'.notes') }}"/>
</td>
@if ($i != 0)
<td>
<button class="delete-row btn btn-danger" type="button">
<i class="fa fa-trash"></i>
</button>
</td>
@endif
</tr>
<script>
$(document).on('keyup', '.number', function() {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
const value = $(this).val()
const subsstr = value.substring(0, 1)
if (subsstr == 0) {
$(this).val('')
}
})
$('#multiselect4-filter').multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
maxHeight: 200
});
$('#multiselect5-filter').multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
maxHeight: 200
});
$('.datepicker').datepicker({
startDate: '-0m',
});
function addMultiSelect(id) {
$('#test-body').find(`select.type_container${id}`).multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
maxHeight: 200
});
};
// Remove criterion
$(document).on("click", ".delete-row", function() {
if (row > 1) {
$(this).closest('tr').remove();
row--;
}
return false;
});
// Add new row upload
$("#add-upload-row").click(function() {
var html = $(".clone").html();
$(".increment").after(html);
});
$("body").on("click", "#delete-upload-row", function() {
$(this).parents(".control-group").remove();
});
$(document).on('submit', 'form#form-excel', function(e) {
e.preventDefault()
const input = $('#file').val()
if (input == '') {
alert('please select the file first')
return
}
let form_data = new FormData(this);
$.ajax({
type: 'post',
url: "{{ route('import.jobs') }}",
data: form_data,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
beforeSend: function() {
setLoading()
},
success: function(res) {
if (res.status) {
hideLoading()
window.location.href = "{{ route('view.import.jobs') }}"
}
},
error: function(xhr) {
console.log(xhr);
//hideLoading()
}
})
})
function setLoading() {
let loading_text = $('.btn-import-excel').data('loading-text');
$('.btn-import-excel').html(loading_text).attr('disabled', true);
}
function hideLoading() {
$('.btn-import-excel').html('Import').attr('disabled', false)
}
</script>