@extends('main.template')

@section('content')

<div class="row">

    <form action="{{ route('customers.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
                            value="{{ $term ?? '' }}"
                            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 Clientes</h1>
        <div class="panel panel-primary">
            <div class="panel-body">
                <div class="table-responsive">
                    @if(!empty($customers))
                    <table class="table table-bordered table-hover table-striped" id="products-list">
                        <thead>
                            <tr>
                                <th>Local&nbsp;Status</th>
                                <th>ID</th>
                                <th>Nome</th>
                                <th>Morada</th>
                                <th>Nif</th>
                                <th>Contacto</th>
                                <th>Vendedor</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($customers as $customer)
                            <tr id="customer-{{ $customer->id }}">
                                <td style="width:50px;">
                                    <a class="btn btn-sm btn-info left"
                                        href="{{ route('history.customer', ['id' => $customer->id]) }}">
                                        <i class="fa fa-list"></i>
                                    </a>
                                                                        <button class="btn btn-sm btn-danger update-customer"
                                        data-id="{{ $customer->id  }}">
                                        <i class="fa fa-eye-slash"></i>
                                    </button>
                                                                    </td>
                                <td>{{ $customer->external_id }}</td>
                                <td>{{ $customer->name }}</td>
                                <td>{{ $customer->address }}</td>
                                <td>{{ $customer->nif }}</td>
                                <td>{{ $customer->telephone }}</td>
                                <td>{{ $customer->seller_id }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $customers->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('customers.autocomplete') }}";

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

    jQuery(".update-customer").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('customers.set_visibility') }}"
            , dataIn
            , function(dataout){
                window.location.reload();
        })

    })

</script>
@endsection