@extends('main.template')

@section('content')

<div class="row">
    @if($status=="all")
    <form action="{{ route('orders.search') }}" method="post" enctype="multipart/form-data">
    @else
    <form action="{{ route('orders.bystatus.search', ["status"=>$status]) }}" method="post" enctype="multipart/form-data">
    @endif
        @csrf
        <div class="typeahead__container">
            <div class="typeahead__field">
                <div class="typeahead__query">
                    <input class="js-typeahead"
                            name="term"
                            value="{{ $searchedTerm ?? '' }}"
                            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 Encomendas</h1>
        <div class="panel panel-primary">
            <div class="panel-body">
                <div class="table-responsive">
                    @if(!$orders->isEmpty())
                    <table class="table table-bordered table-hover table-striped" id="orders-list">
                        <thead>
                            <tr>
                                <th></th>
                                <th>ID</th>
                                <th>Vendedor</th>
                                <th>Cliente</th>
                                <th>Total</th>
                                <th>Observaçoes</th>
                                <th>Data</th>
                                @if($status=="reconciliadas")
                                <th>Primavera</th>
                                @endif
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($orders as $order)
                            <tr id="order-{{ $order->id }}">
                                <td style="width:50px;">
                                    <a class="btn btn-sm btn-info left"
                                        href="{{ route('orders.details', ['id' => $order->id ]) }}">
                                        <i class="fa fa-list"></i>
                                    </a>
                                </td>
                                <td>{{ $order->id }}</td>
                                <td>{{ $order->user_name }} {{ $order->last_name }}</td>
                                <td>{{ $order->name }}</td>
                                <td>{{ $order->total_s_iva }}</td>
                                <td>{{ $order->comment }}</td>
                                <td>{{ $order->date }}</td>
                                @if($status=="reconciliadas")
                                <td>{{ ($order->historyHeader->TipoDoc ?? '')." ".($order->historyHeader->NumDoc ?? '') }}</td>
                                @endif
                                <td>{{ Order::statusName($order->status) }}</td>                                
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $orders->links('pagination::bootstrap-4') }}
                    @else
                    <div style="text-align:center">Sem resultados</div>
                    
                    <a href="{{ url()->previous() }}" class="btn btn-info">Voltar</a>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>

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


</script>
@endsection