@extends('admin.master')
@section('content')
    <section id="dashboard-content">
        <div id="home" class="col-xs-12 section-content">
            <h1 class="page-title">Versões sem Modelo vinculado: <span id="totalOrfaos">{{count($versoes)}}</span></h1>
            <div class="row">
                <div class="col-xs-12">
                    <button type="button" class="btn btn-default" id="btn-vincular">Auto Vincular</button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <form class="form form-inline">
                        <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">
                            <select class="form-control" id="inputModelo" name="inputModelo">
                                <option value=""> - Selecione um modelo -</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="button" id="btnSalvar" name="btnSalvar" class="btn btn-primary">Salvar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <br>
            <div class="row">
                <div id="home-content" class="col-xs-12">
                    <form id="frmCodes">
                        <table class="table table-condensed table-hover" id="tblFipeOrfaos">
                            <thead>
                            <tr>
                                <th>Sel.</th>
                                <th>Tipo</th>
                                <th>Marca</th>
                                <th>Código FIPE</th>
                                <th>Modelo com versão</th>
                                <th>Ações</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($versoes as $versao)
                                <tr class="linha">
                                    <td><input type="checkbox" class="form-control" name="code[]"
                                               value="{{$versao->code}}"></td>
                                    <td>{{$versao->tipo}}</td>
                                    <td>{{$versao->marca}}</td>
                                    <td>{{$versao->code}}</td>
                                    <td>{{$versao->model}}</td>
                                    <td>
                                        @if(!empty($versao->possiveis))
                                            <form name="frmFastFipe" class="form-inline">
                                                <div class="form-group">
                                                    <select name="selectFipe" class="form-control input-sm">

                                                        @foreach($versao->possiveis as $possivel)
                                                            <option value="{{$possivel->modelo_id}}">{{$possivel->modelo}}</option>
                                                        @endforeach

                                                    </select>
                                                </div>
                                                <button type="button" class="btn btn-success btn-sm btn-single-add"
                                                        data-code="{{$versao->code}}"
                                                        data-modelo="{{$possivel->modelo_id}}"><span
                                                            class="fa fa-check-circle"></span></button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>

        function spinOn(element) {
            element.removeClass('glyphicon glyphicon-search').addClass('fa fa-spinner fa-spin');
        }

        function spinOff(element) {
            element.removeClass('fa fa-spinner fa-spin').addClass('glyphicon glyphicon-search');
        }


        $("#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));
                });

            });
        });

        $("#inputMarca").change(function () {
            var car_type = $("#inputTipo").val();
            var marca = $("#inputMarca").val();
            $.ajax({
                url: '{{route('ajax.fipe.modelos')}}' + '/' + car_type + '/' + marca,
                type: 'GET'
            }).done(function (data) {
                var modelos = $("#inputModelo");
                modelos.find('option').remove().end().append('<option value=""> - Selecione um modelo - </option>').val('');
                $.each(data.data, function () {
                    modelos.append(new Option(this.name, this.id));
                });
            });
        });

        $("#btnSalvar").click(function () {
            var modelo_id = $("#inputModelo").val();
            var codes = $('input[name="code[]"]:checked').map(function () {
                return this.value;
            }).get();

            $.ajax({
                url: '{{route('admin.fipe.orfaos.save')}}',
                type: 'POST',
                data: {
                    "_token": '{{csrf_token()}}',
                    modelo_id: modelo_id,
                    code: codes
                }
            }).done(function () {
                alert('Atualizado com sucesso!');
                location.reload();

            });

        });


        var tabelaFipeOrfaos = $("#tblFipeOrfaos").DataTable({
            pageLength: 100,
            lengthMenu: [100, 250, 500, 1000, 2000, 5000],
            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"
                }
            }
        });

        $("#tblFipeOrfaos").on('click', '.btn-single-add', function () {

            var elemento = $(this);

            var total = parseInt($("#totalOrfaos").html());

            $.ajax({
                url: '{{route('admin.fipe.orfaos.save')}}',
                type: 'POST',
                data: {
                    "_token": '{{csrf_token()}}',
                    modelo_id: elemento.data('modelo'),
                    code: [elemento.data('code')]
                }
            }).done(function () {
                tabelaFipeOrfaos.row(elemento.closest('.linha')).remove().draw();
                total = total - 1;
                $("#totalOrfaos").html(total);
            }).error(function () {
                alert('Ocorreu um erro!');
            });
        });

        var btnVincular = $("#btn-vincular");

        btnVincular.click(function() {

            btnVincular.attr('disabled', true);

            $.ajax({
                method: 'get',
                url: '{{route('admin.fipe.orfaos.auto')}}'
            }).done(function() {
                btnVincular.attr('disabled', false);
                alert('Solicitação de Vínculo automático efetuada com sucesso você receberá um email quando o processo for concluído!')
            });
        });


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