@extends('admin.master')
@section('content')
    <section id="dashboard-content">
        <div id="cadastro" class="col-xs-12 section-content">
            <div class="row">
                <div id="cca-content" class="col-xs-12 box-content">
                    <h1>Cadastro de Anúncios</h1>
                    @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                            <br>
                            <a target="_blank" href="{{route('admin.report.anuncio', session('car_id') )}}">Visualizar anúncio em uma nova janela</a>
                        </div>
                    @endif
                    <form action="{{route('admin.car.save')}}" method="post" id="frmSalvarCarro" class="form form-horizontal" enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="store_id" id="store_id" class="form-control select-pesquisa">
                                    <option value=""> -  Selecione uma loja - </option>
                                    @foreach($stores as $store)
                                        <option value="{{$store->id}}">{{$store->trade_name}} - {{$store->cnpj}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="vendedor" id="vendedor" class="form-control select-pesquisa" >
                                    <option value=""> - Selecione um vendedor - </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="tipo" id="tipo" class="form-control">
                                    <option value=""> - Selecione um tipo de veículo - </option>
                                    @foreach($tipos as $tipo)
                                        <option value="{{$tipo->id}}">{{$tipo->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-3 col-xs-6">
                                <select name="brand_id" id="marcas" class="form-control select-pesquisa">
                                    <option value=""> - Selecione uma marca - </option>
                                </select>
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <select name="year" id="ano" class="form-control select-pesquisa">
                                    <option value=""> - Selecione um ano - </option>
                                </select>

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="fipe_id" id="modelo" class="form-control select-pesquisa">
                                    <option value=""> - Selecione um modelo - </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-3 col-xs-6">
                                <input type="text" disabled name="combustivel" id="combustivel" class="form-control" placeholder="Combustivel">
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <div class="input-group">
                                    <span class="input-group-addon" id="valorfipe">R$</span>
                                    <input type="text" disabled name="fipeprice" id="fipeprice" class="form-control" placeholder="Valor da Fipe" aria-describedby="valorfipe">
                                    <span class="input-group-addon">,00</span>
                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-3 col-xs-6">
                                <input type="text" disabled name="fipe_limit" id="fipe_limit" class="form-control" placeholder="Limite Fipe">
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <div class="input-group">
                                    <span class="input-group-addon" id="limitevalor">R$</span>
                                    <input type="text" disabled name="fipe_max" id="fipe_max" class="form-control" placeholder="Valor máximo do anúncio" aria-describedby="limitevalor">
                                    <span class="input-group-addon">,00</span>
                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <input type="text" class="form-control dinheiro" id="valor" name="price" placeholder="Informe o valor do veículo">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="doors" id="portas" class="form-control">
                                    <option value=""> - Selecione a quantidade de portas - </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="eixos" id="eixos" class="form-control">
                                    <option value=""> - Selecione a quantidade de eixos - </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="color_id" id="cor" class="form-control">
                                    <option value=""> - Selecione uma cor - </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <input type="text" class="form-control km" name="km" placeholder="Informe a Km do veículo">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <ul id="opcionais" class="list-group row"></ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <textarea name="observation" class="form-control" placeholder="Observações"></textarea>
                            </div>
                        </div>

                        <p>Enviar entre 4 e 6 fotos:</p>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <input type="file" name="filename[]" multiple="multiple" ><br>
                            </div>
                        </div>

                        <p>Informe o público para este anúncio:</p>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <ul class="list-unstyled">
                                    @foreach($user_types as $user_type)
                                        <li class="list-group-item col-xs-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" name="user_types[]" value="{{$user_type->id}}"> {{$user_type->name}}
                                                </label>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <select name="status" class="form-control">
                                    <option> - Selecione uma ação - </option>
                                    <option value="4">Marcar como em cadastro (o vendedor finaliza)</option>
                                    <option value="1">Publicar o anúncio</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <button type="submit" class="btn btn-primary">Salvar</button>
                            </div>
                        </div>

                    </form>

                </div>


            </div>
        </div>
    </section>
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" integrity="sha256-nbyata2PJRjImhByQzik2ot6gSHSU4Cqdz5bNYL2zcU=" crossorigin="anonymous" />
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/autonumeric/1.9.46/autoNumeric.min.js"></script>
    <script src="{{url('js/backend.js')}}"></script>
    <script>
        var storageObject = {
            fipePercent: 0,
            maxValue: 0,
            user_type: 0,
            user_id: 0
        };

        $(document).ready(function() {
            $('.select-pesquisa').select2({
                theme: 'bootstrap'
            });
        });

        var tipovendedor = $("#tipo_vendedor");

        var loja = $("#store_id");

        var vendedorselect = $("#vendedor");

        tipovendedor.change(function() {
            var tipovendedorid = tipovendedor.val();
            $.ajax({
                url: '{{route('admin.car.users')}}/' + tipovendedorid,
                type: 'get'
            }).done(function(data) {
                var vendedor = $("#vendedor");
                vendedor.find('option').remove().end().append('<option value=""> - Selecione um vendedor - </option>').val('');
                var dynamicItems = "";
                $.each(data, function() {
                    dynamicItems += '<option value="' + this.id + '">' + this.name + ' - ' + this.dealership + "</option>";

                });
                vendedor.append(dynamicItems);

            });
        });

        loja.change(function() {
            var store_id = loja.val();
            $.ajax({
                url: '{{route('admin.car.staff')}}/' + store_id,
                type: 'get'
            }).done(function(data) {
                var vendedor = $("#vendedor");
                vendedor.find('option').remove().end().append('<option value=""> - Selecione um vendedor - </option>').val('');
                var dynamicItems = "";
                $.each(data, function() {
                    dynamicItems += '<option value="' + this.id + '" data-type="' + this.user_type + '" >' + this.name + '</option>';

                });
                vendedor.append(dynamicItems);
            });
        });

        vendedorselect.change(function() {
            storageObject.user_type = $(this).find(':selected').data('type');
            storageObject.user_id = $(this).find(':selected').val();
        });


        $("#tipo").change(function() {
            var cartype = $("#tipo").val();
            $.ajax({
                url: '{{route('admin.car.populate')}}' +  '/' + cartype,
                type: 'GET'
            }).done(function(data) {
                storageObject.fipePercent = data.data.percent;
                $("#fipe_limit").val(data.data.percent + "%");

                var marcas = $("#marcas");
                marcas.find('option').remove().end().append('<option value=""> - Selecione uma marca - </option>').val('');
                $.each(data.data.brands, function() {
                    marcas.append(new Option(this.name, this.id));
                });
                var ano = $("#ano");
                var listaanos = data.data.years.reverse();
                ano.find('option').remove().end().append('<option value=""> - Selecione um ano - </option>').val('');
                $.each(listaanos, function() {
                    ano.append(new Option(this, this));
                });

                var portas = $("#portas");
                if (cartype != 8) {
                    //se moto não exibe
                    portas.find('option').remove().end().append('<option value=""> - Selecione a quantidade de portas - </option>').val('');
                    $.each(data.data.doors, function() {
                        portas.append(new Option(this, this));
                    });
                    portas.show('fast');
                } else {
                    portas.hide('fast');
                }

                var eixos = $("#eixos");
                if(cartype == 5) {
                    eixos.find('option').remove().end().append('<option value=""> - Selecione a quantidade de eixos - </option>').val('');
                    $.each(data.data.eixos, function() {
                        eixos.append(new Option(this, this));
                    });
                    eixos.show('fast');
                } else {
                    eixos.hide('fast');
                }

                var cores = $("#cor");
                cores.find('option').remove().end().append('<option value=""> - Selecione uma cor - </option>').val('');
                $.each(data.data.colors, function() {
                    cores.append(new Option(this.name, this.id));
                });

                var opcionais = $("#opcionais");
                opcionais.empty();
                $.each(data.data.optional, function() {
                    opcionais.append('<li class="list-group-item col-xs-6"><div class="checkbox"><label><input type="checkbox" name="optionals[]" value="' +  this.id +'">' + this.name + '</label></div></li>');
                });

            });
        });

        $("#marcas").change(function() {
            var marca = $("#marcas").val();
            var cartype = $("#tipo").val();
            $.ajax({
                url: '{{route('admin.car.years')}}' + '/' + cartype + '/' + marca ,
                type: 'GET'
            }).done(function(data) {
                var anos = $("#ano");
                anos.find('option').remove().end().append('<option value=""> - Selecione um ano - </option>').val('');
                $.each(data.data, function() {
                    anos.append(new Option(this, this));
                });
            });
        });

        $("#ano").change(function() {
            var marca = $("#marcas").val();
            var ano = $("#ano").val();

            $.ajax({
                url: '{{route('admin.car.fipe.limit')}}/' + storageObject.user_id + '/' + ano,
                type: 'get'
            }).done(function(data) {
                // Nova porcentagem da fipe
                storageObject.fipePercent = data.fipe_percent;
                $("#fipe_limit").val(data.fipe_percent + '%');
            });


            $.ajax({
                url: '{{route('admin.car.models')}}' +  '/' + marca + '/' + ano,
                type: 'GET'
            }).done(function(data) {
                var modelos = $("#modelo");
                modelos.find('option').remove().end().append('<option value=""> - Selecione um modelo - </option>').val('');
                $.each(data.data, function() {
                    modelos.append('<option data-fuel="' + this.fuel + '" data-brandid="' +  this.brand_id + '" data-fipeid="' + this.id + '" data-fipeprice="' + this.price +'"   value="' + this.id + '">' + this.model + '</option>');
                });
            });

        });


        $("#modelo").change(function() {
            var combustivel = $(this).find(':selected').data('fuel');
            $("#combustivel").val(combustivel);
            var fipe = $(this).find(':selected').data('fipeprice');
            $("#fipeprice").val(number_format(fipe, 0, '', '.'));
            storageObject.maxValue = maxValue(fipe, storageObject.fipePercent);
            $("#fipe_max").val(number_format(storageObject.maxValue), 0, '','.');
        });

        function fipe_format(value) {
            return number_format(value, 2, ',', '.' );
        }

        $.validator.addMethod("fipe", function(value, element, para) {
                if (limpaValor(value) > storageObject.maxValue) {
                    return false;
                } else {
                    return true;
                }

            }, function(para, element) {
                var newValue = fipe_format(storageObject.maxValue);
                return $.validator.format('Valor informado é maior que o valor permitido: R$ {0}', newValue);
            }
        );

        $("#frmSalvarCarro").validate({
            rules: {
                vendedor:       {required: true},
                tipo:           {required: true},
                color_id:       {required: true},
                doors:          {required: true},
                eixos:          {required: true},
                brand_id:       {required: true},
                fipe_id:        {required: true},
                year:           {required: true},
                observation:    {required: true},
                price:          {required: true, fipe: storageObject.maxValue},
                km:             {required: true},
                "filename[]":   {required: true},
                status:         {required: true},
                "user_types[]": {required: true}
            },
            messages: {
                vendedor:       {required: "Favor selecionar o vendedor"},
                tipo:           {required: "Favor informar o tipo do veículo"},
                color_id:       {required: "Favor informar uma cor"},
                doors:          {required: "Favor informar a quantidade de portas"},
                eixos:          {required: "Favor informar a quantidade de eixos"},
                brand_id:       {required: "Favor informar a marca"},
                fipe_id:        {required: "Favor informar o modelo"},
                year:           {required: "Favor informar o ano"},
                observation:    {required: "Favor inserir uma observação"},
                price:          {required: "Favor informar o preço"},
                km:             {required: "Favor informar a quilometragem"},
                "filename[]":   {required: "Favor selecionar de 4 a 6 fotos"},
                status:         {required: "Favor selecionar uma ação"},
                "user_types[]": {required: "Favor informar o público deste anúncio"}
            }
        });





    </script>
@endsection