@csrf
<link rel="stylesheet" href="{{ asset('js/plugins/colorpicker/bootstrap-colorpicker.min.css') }}">
<div class="card-body">
    <input type="hidden" class="form-control" id="id" name="id" required value="{{ $businessRating->id ?? old('id') }}">
    <div class="row">
        <div class="col-6 col-md-6">
            <div class="form-group">
                <label for="name">{{ Lang::get('messages.business_rating.title_1') }} </label>
                <input type="text" class="form-control" maxlength="100" id="name" name="name" required value="{{ $businessRating->name ?? old('name') }}">
            </div>
        </div>
        <div class="col-6 col-md-6">
            <div class="form-group">
                <label for="score">{{ Lang::get('messages.business_rating.title_3') }}</label>
                <input type="text" class="form-control" id="score" name="score" required value="{{ $businessRating->score ?? old('score') }}">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-12">
            <label for="comment">{{ Lang::get('messages.business_rating.title_7') }}</label>
            <select class="form-control select2 col-12 col-md-12" multiple="multiple" name="comment" required id="comment">
                @foreach ($options as $item) @if(isset($businessRating) && str_contains($item, $item))
                <option value="{{ $item }}" selected>{{ $item }}</option>
                @else
                <option value="{{ $item }}">{{ $item }}</option>
                @endif @endforeach
            </select>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-12 col-md-12">
            <div class="form-group">
                <label for="image">{{ Lang::get('messages.business_rating.title_2')}} </label>
                <input type="file" id="image" name="image" title="Formatos: .JPG o .PNG (300x300px)"  onchange="return validarExt()">
            </div>
        </div>
        <div class="col-4 col-md-4">
            <br />
            <div id="visorArchivo">
                <!--Aqui se desplegará la imagen-->
            </div>
            <br />
        </div>
    </div>
</div>
<br>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/crud.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/business_rating.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/plugins/colorpicker/bootstrap-colorpicker.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#color').colorpicker();
        $('.select2').select2({
            language: "es",
            selectOnClose: false,
            tags: true,
            tokenSeparators: [","],
        });
    });

    function validarExt() {
        var archivo = document.getElementById('image');
        var archivoRuta = archivo.value;
        // var extPermitidas = /(.jpeg|.jpg|.png|.gif)$/i;
        var extPermitidas = /(.svg)$/i;
        if (archivo.size >= 200 * 1024 * 1) {
            alert('LA IMAGEN NO PUEDE PESAR MAS DE 200 KB');
            document.getElementById("archivo").value = "";
        } else {
            if (!extPermitidas.exec(archivoRuta)) {
                alert('DEBE DE SELECIONADO UNA IMAGEN');
                archivo.value = '';
                return false;
            } else {
                //PRevio del PDF
                if (archivo.files && archivo.files[0]) {
                    var visor = new FileReader();
                    visor.onload = function(e) {
                        document.getElementById('visorArchivo').innerHTML =
                            '<embed src="' + e.target.result + '" width="100" height="100" />';
                    };
                    visor.readAsDataURL(archivo.files[0]);
                }
            }
        }
    }
</script>