@extends('customer.app')
@section('title', 'Incluir Demanda')
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card-box">
            <form class="form-horizontal" method="POST" action="{{ route('customer.orders.store') }}">
                {{ csrf_field() }}
                <div class="row">
                    <div class="col-md-10">
                        <div class="form-group{{ $errors->has('category_id') ? ' has-error' : '' }}">
                            <div class="col-md-9">
                                <label for="category_id">Produto ou serviço desejado</label>
                                <select id="category_id" class="form-control" name="category_id" required>
                                    <option value="">Selecione</option>
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @if ($errors->has('category_id'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('category_id') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
                            <div class="col-md-9">
                                <label for="description">Descreva aqui todos os detalhes da sua demanda</label>
                                <textarea id="elm1" name="description"></textarea>
                                @if ($errors->has('description'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('description') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-9">
                                <label for="range_01">Média de Investimento<span class="font-normal text-muted clearfix">Arraste o controle para esquerda ou direita para escolher o valor que pretende investir no produto/serviço.</span></label>
                                <input type="text" id="range_01" data-min="0" data-max="0" name="price_average" required>
                                <span class="font-normal text-muted ">Valor mínimo encontrado</span>
                                <span class="pull-right text-muted clearfix">Valor máximo encontrado</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="m-l-10">
                                <button type="submit" class="btn btn-primary">
                                    Salvar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!--form wysiwig js-->
<script src="{{ asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
<script>
    $(document).ready(function () {
        if($("#elm1").length > 0){
            tinymce.init({
                language: 'pt_BR',
                selector: "textarea#elm1",
                theme: "modern",
                height:300,
                plugins: [
                    "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                    "save table contextmenu directionality emoticons template paste textcolor"
                ],
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                style_formats: [
                    {title: 'Bold text', inline: 'b'},
                    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                    {title: 'Example 1', inline: 'span', classes: 'example1'},
                    {title: 'Example 2', inline: 'span', classes: 'example2'},
                    {title: 'Table styles'},
                    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
                ]
            });
        }
    });
</script>

<script src="{{ asset('assets/js/jquery.mask.js') }}"></script>
<script>
    $(document).ready(function(){
        $('#average').mask('000.000,00', {reverse: true});
    });
</script>

<!-- range slider js -->
<script src="{{ asset('assets/plugins/ion-rangeslider/ion.rangeSlider.min.js') }}"></script>
<script src="{{ asset('assets/pages/jquery.ui-sliders.js') }}"></script>
<script>
    $(document).ready(function () {
        $("#category_id").change(function() {
            var category = $(this).val();
            $.ajax({
                type:'GET',
                url:'/customer/orders/valuesService/' + category,
                success:function(data){
                    $("#range_01").attr("data-min", data["min"]).attr("data-max", data["max"]);
                    var slider = $("#range_01").data("ionRangeSlider");
                    slider.update({
                        min: data["min"],
                        max: data["max"],
                        from: data["average"],
                    });
                },
                error: function(){
                    var slider = $("#range_01").data("ionRangeSlider");
                    slider.update({
                        min: 0,
                        max: 0,
                        from: 0,
                    });
                }
            });
        });
    });
</script>
@endpush