@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">
                    <h3>Edição de Anúncio</h3>
                    @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.update')}}" method="post" id="frmSalvarCarro"
                          class="form form-horizontal">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="car_id" value="{{ $anuncio->id }}">
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <input class="form-control" type="text" disabled value="{{$anuncio->user->name}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <input class="form-control" type="text" disabled value="{{$anuncio->type->name}}">

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-3 col-xs-6">
                                <input class="form-control" type="text" disabled value="{{$anuncio->brand->name}}">
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <input class="form-control" type="text" disabled value="{{$anuncio->year}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <input class="form-control" type="text" disabled value="{{$anuncio->fipe->model}}">
                            </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" value="{{$anuncio->fipe->fuel}}">
                            </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"
                                           value="{{number_format($anuncio->fipe->price, 0, ',', '.')}}">
                                    <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" value="{{$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"
                                       value="{{number_format($anuncio->price, 2, ',', '.')}}">
                            </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" value="{{$anuncio->km}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <ul id="opcionais" class="list-group row">
                                    @foreach($optionals as $optional)
                                        <li class="list-group-item col-xs-6">
                                            <div class="checkbox"><label><input
                                                            {{in_array($optional->id, $anuncio->array_optionals) ? 'checked' : ''}} type="checkbox"
                                                            name="optionals[]"
                                                            value="{{$optional->id}}">{{$optional->name}}</label></div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-xs-12">
                                <textarea name="observation" class="form-control"
                                          placeholder="Observações">{{$anuncio->observation}}</textarea>
                            </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 class="row">
                        <div class="col-xs-12">
                            <h3>Fotos</h3>
                            @if( count($anuncio->photos)  === 0 )
                                <p>Nenhuma foto foi enviada</p>
                            @endif
                            <ul class="list-inline" id="anuncioFotos">
                                @foreach($anuncio->photos as $photo)
                                    <li class="anuncio-imagem">
                                        <a href="{{url('/uploads/gallery/original_' . $photo['filename'])}}"
                                           target="_blank">
                                            <img src="{{url('/uploads/gallery/' . $photo['filename'])}}" width="200"
                                                 height="150">
                                        </a>
                                        <span class="btnRemovePhoto"
                                              data-id="{{$photo['id']}}"
                                              data-toggle="tooltip"
                                              data-placement="top"
                                              title="Remover Foto"
                                        ><i class="fa fa-4x fa-times-circle"></i></span>
                                        @if(!$photo['photo_order'])
                                            <span class="btnFirstPhoto"
                                                  data-id="{{$photo['id']}}"
                                                  data-toggle="tooltip"
                                                  data-placement="top"
                                                  title="Tornar esta foto a principal"
                                            ><i class="fa fa-4x fa-check-circle"></i></span>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                            <p>Enviar fotos (vai recarregar a tela):</p>
                            <form method="POST" class="form form-horizontal" action="{{route('ajax.carphoto.upload')}}"
                                  enctype="multipart/form-data">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <input type="hidden" name="car_id" value="{{$anuncio->id}}">
                                <div class="form-group">
                                    <div class="col-md-6 col-xs-12">
                                        <input type="file" name="filename[]" multiple="multiple">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-3 col-xs-12">
                                        <button type="submit" class="btn btn-primary">Enviar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>


            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <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: {{$fipe}},
            maxValue: 0
        };


        var ready = (function () {
            $('[data-toggle="tooltip"]').tooltip();

            var cartype = {{$anuncio->car_type}};
            $.ajax({
                url: '{{route('admin.car.populate')}}' + '/' + cartype,
                type: 'GET'
            }).done(function (data) {
                // storageObject.fipePercent = data.data.percent;
                storageObject.maxValue = maxValue({{$anuncio->fipe->price}}, storageObject.fipePercent);
                $("#fipe_max").val(storageObject.maxValue);

                var portas = $("#portas");
                if (cartype != 8) {
                    //se moto não exibe
                    portas.find('option').remove().end().append('<option selected value="{{$anuncio->doors}}">{{$anuncio->doors}}</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 selected value="{{$anuncio->eixos}}">{{$anuncio->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 selected value="{{$anuncio->color_id}}">{{$anuncio->color->name}}</option>').val('');
                $.each(data.data.colors, function () {
                    cores.append(new Option(this.name, this.id));
                });

            });


            $("#frmSalvarCarro").validate({
                rules: {
                    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}
                },
                messages: {
                    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"}

                }
            });


            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);
                }
            );


            $("#anuncioFotos").on('click', ".btnRemovePhoto", function () {
                var pergunta = confirm('Deseja apagar esta foto?');
                var div = $(this).closest('.anuncio-imagem');
                var photo_id = $(this).data('id');
                if (pergunta) {
                    $.ajax({
                        url: '{{route('ajax.carphoto.remove')}}',
                        method: 'delete',
                        data: {
                            "_token": '{{csrf_token()}}',
                            photo_id: photo_id
                        }
                    }).done(function (data) {
                        alert('Foto removida');
                        div.remove();
                    }).fail(function (data) {
                        console.log(data);
                        alert('Falha ao remover a foto');
                    });
                } else {
                    return false;
                }
            });

            $("#anuncioFotos").on('click', ".btnFirstPhoto", function () {
                var pergunta = confirm('Deseja tornar esta foto a principal?');
                var div = $(this).closest('.anuncio-imagem');
                var btn = $(this);
                var photo_id = $(this).data('id');
                if (pergunta) {
                    $.ajax({
                        url: '{{route('ajax.carphoto.first')}}',
                        method: 'post',
                        data: {
                            "_token": '{{csrf_token()}}',
                            photo_id: photo_id
                        }
                    }).done(function (data) {
                        alert('Foto principal selecionada');
                        $("#anuncioFotos").load(location.href + " #anuncioFotos>*");
                    }).fail(function (error) {
                        alert('ocorreu um erro');
                    });

                } else {
                    return false;
                }
            });

        })();


        $(document).ready(ready);
    </script>
@endsection