@extends('main.template')

@section('content')

<div class="row">

    <form action="{{ route('products.search') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="typeahead__container">
            <div class="typeahead__field">
                <div class="typeahead__query">
                    <input class="js-typeahead"
                            name="term"
                            autofocus
                            autocomplete="off">
                </div>
                <div class="typeahead__button">
                    <button type="submit">
                        <span class="typeahead__search-icon"></span>
                    </button>
                </div>
            </div>
        </div>
    </form>

    <div class="col-sm-12">
        <hr class="sidebar-divider d-none d-md-block">
        <h1 class="h3 mb-2 text-gray-800">Lista de Produtos</h1>
        <div class="panel panel-primary">
            <div class="panel-body">
                <div class="table-responsive">
                    @if(!empty($products))
                    <table class="table table-bordered table-hover table-striped" id="products-list">
                        <thead>
                            <tr>
                                @if(Auth::user()->isAdmin())
                                <th>Visibilidade</th>
                                @endif
                                <th>ID</th>
                                <th>Descrição</th>
                                @if(Auth::user()->isAdmin())
                                <th>Preço 1</th>
                                <th>Preço 2</th>
                                <th>Preço 3</th>
                                @else
                                <th>Preço</th>
                                @endif
                                <th>Stock</th>
                                <th>IVA</th>
                                <th>Atualizado</th>
                                @if(Auth::user()->isAdmin())
                                <th>Estado Privamera</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($products as $product)
                            <tr id="product-{{ $product->id ?? 0 }}">
                                @if(Auth::user()->isAdmin())
                                <td style="width:50px;">
                                    @if($product->activo)
                                    <button class="btn btn-sm btn-success update-product"
                                        data-id="{{ $product->id ?? 0  }}">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    @else
                                    <button class="btn btn-sm btn-danger update-product"
                                        data-id="{{ $product->id ?? 0  }}">
                                        <i class="fa fa-eye-slash"></i>
                                    </button>
                                    @endif
                                </td>
                                @endif
                                <td>{{ $product->external_id }}</td>
                                <td>{{ $product->description }}</td>

                                @if(Auth::user()->isAdmin())
                                <td>{{ $product->pvp1 }}</td>
                                <td>{{ $product->pvp2 }}</td>
                                <td>{{ $product->pvp3 }}</td>
                                @else
                                <td>{{ Auth::user()->getPrice($product) }}</td>
                                @endif
                                <td>{{ $product->stock<0 ? 0 : $product->stock }}</td>
                                <td>{{ $product->iva }}</td>
                                <td>{{ $product->updated_at }}</td>
                                @if(Auth::user()->isAdmin())
                                <td>{{ Product::getStatusText($product->status)  }}</td>
                                @endif
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $products->links('pagination::bootstrap-4') }}
                    @else
                    <div style="text-align:center">Sem resultados</div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    var route = "{{ route('products.autocomplete') }}";

    jQuery.typeahead({
        input: ".js-typeahead",
        minLength: 1,
        order: "asc",
        hint: true,
        dynamic: true,
        maxItem: 100,
        cancelButton: true,
        delay: 500,
        cache: false,
        display: ["external_id", "description"],
        correlativeTemplate: false,
        template: function(query, item){
            return "<b>"+item.external_id+"</b> <small style='color:#999;'>"+item.description+"</small>";
        },
        templateValue: "external_id",
        emptyTemplate: "Sem resultados.",
        source: {
            prods: {
                ajax: function (query) {
                    return {
                        type: "POST",
                        url: route,
                        path:"products",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            val: query
                        },
                    }
                },
            }
            
        },
        callback: {
            onClickAfter: function(node, a, item, event) {
                item = item.external_id;
            }
        }, 
        debug: true
    });

    jQuery(".update-product").on("click", function(e){
        e.preventDefault();
        var elem = jQuery(this);
        var thisid = elem.data("id");
        var dataIn = {
            "_token": "{{ csrf_token() }}",
            id : thisid
        }
        
        jQuery.post("{{ route('products.set_visibility') }}"
            , dataIn
            , function(dataout){
                window.location.reload();
        })

    })

</script>
@endsection