@extends('admin.master')
@section('content')
    <section id="dashboard-content">
        <div id="home" class="col-xs-12 section-content">
            <h1 class="page-title">Modelos</h1>
            <div class="row">
                <div class="col-xs-12">
                    <form class="form form-inline" id="frmNovoModelo">
                        {{csrf_field()}}
                        <input type="hidden" value="" name="inputId" id="inputId">
                        <div class="form-group">
                            <select class="form-control" id="inputTipo" name="inputTipo">
                                <option value=""> - Selecione um tipo - </option>
                                <option value="0">Carro</option>
                                <option value="5">Caminhão</option>
                                <option value="8">Moto</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <select class="form-control" id="inputMarca" name="inputMarca">
                                <option value=""> - Selecione uma marca - </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="inputModelo" id="inputModelo" placeholder="Insira um modelo">
                        </div>
                        <div class="form-group">
                            <button type="button" id="btnSalvar" name="btnSalvar" class="btn btn-primary">Salvar modelo</button>
                        </div>
                    </form>
                </div>
            </div>

            <br>
            <div class="row">
                <div class="col-xs-12">
                    <table id="tblModelos" class="table table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>Tipo</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                            <th>Ações</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($modelos as $modelo)
                            <tr>
                                <td>{{$modelo->tipo}}</td>
                                <td>{{$modelo->marca}}</td>
                                <td>{{$modelo->modelo}}</td>
                                <td>
                                    <button type="button" class="btn btn-default btn-sm btnEditar" data-id="{{$modelo->id}}" data-tipo="{{$modelo->idtipo}}" data-marca="{{$modelo->idmarca}}" data-modelo="{{$modelo->modelo}}">Editar</button>
                                    <a type="button" class="btn btn-default btn-sm" href="{{route('admin.fipe.modelo', $modelo->id)}}">Detalhes</a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('scripts')
    <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script>
        $("#inputTipo").change(function() {
            var cartype = $("#inputTipo").val();
            $.ajax({
                url: '{{route('admin.car.populate')}}' +  '/' + cartype,
                type: 'GET'
            }).done(function(data) {

                var marcas = $("#inputMarca");
                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));
                });

            });
        });

        $(".btnEditar").click(function() {
            $("#inputId").val($(this).data('id'));
            var tipo = $(this).data('tipo');
            $("#inputTipo").val(tipo);

            var marcaid = $(this).data('marca');

            $.ajax({
                url: '{{route('admin.car.populate')}}' +  '/' + tipo,
                type: 'GET'
            }).done(function(data) {

                var marcas = $("#inputMarca");
                marcas.find('option').remove().end();
                $.each(data.data.brands, function() {
                    marcas.append(new Option(this.name, this.id));
                });

                $("#inputMarca").val(marcaid);

            })



            $("#inputModelo").val($(this).data('modelo'));

            console.log($(this).data('id'));
        });

        $("#btnSalvar").click(function() {

            $.ajax({
                url: '{{route('ajax.fipe.modelos.save')}}',
                type: 'POST',
                data: $("#frmNovoModelo").serialize()
            }).done(function() {
                alert('Atualizado com sucesso!');
                location.reload();
            });

        });


        $("#tblModelos").DataTable({
            language: {
                search:         "Procurar",
                lengthMenu:    "Exibir _MENU_ registros",
                info:           "Exibindo de _START_ até _END_ de _TOTAL_ registros",
                infoEmpty:      "Exibindo de 0 até 0 de um total de 0 registros",
                infoFiltered:   "(filtrado de _MAX_ registros no total)",
                infoPostFix:    "",
                paginate: {
                    first:      "Primeira",
                    previous:   "Anterior",
                    next:       "Próxima",
                    last:       "Última"
                },
                aria: {
                    sortAscending:  ": clique para ordenar de forma crescente",
                    sortDescending: ": clique para ordenar de forma decrescente"
                }
            }
        });

    </script>
@endsection

@section('css')
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
@endsection