{{ Form::open([
    'route' => 'upload_material',
    'method' => 'POST',
    'autocomplete' => 'off',
    'enctype' => 'multipart/form-data',
]) }}
<div class="modal-body">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <span>Upload a CSV of your Material Management information. The following fields are required in the
                    CSV: <strong>Category, Division
                        , Material Name, Rate, Unit, Varient.</strong></span>
                <br>
                {{ Form::label('material_name', __('Material CSV File'), ['class' => 'form-label']) }}
                <span class="text-danger pl-1">*</span>
                <input id="csv_file" type="file" class="form-control document_setup" name="csv_file"
                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    required>
                <span class="show_document_error" style="color:red;"></span>
                <br><b><a href="{{ url('/download-material-management') }}">Click to
                    download sample CSV file.</a></b>
                @error('csv_file')
                    <small class="invalid-name" role="alert">
                        <strong class="text-danger">{{ $message }}</strong>
                    </small>
                @enderror
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <input type="button" value="{{ __('Cancel') }}" class="btn  btn-light" data-bs-dismiss="modal">
    <input type="submit" value="{{ __('Import') }}" class="btn  btn-primary" id="import_material">
</div>

{{ Form::close() }}

<script>
    $(document).on('submit', 'form', function() {
        $('#import_material').attr('disabled', 'disabled');
    });

    $(document).on('change', '.document_setup', function() {
        var fileExtension = ['csv'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
            $(".show_document_file").show();
            $(".show_document_error").html("Upload only csv");
            $("#import_material").prop('disabled', true);
            return false;
        } else {
            $(".show_document_file").show();
            $(".show_document_error").hide();
            $("#import_material").prop('disabled', false);
            return true;
        }

    });
</script>