@extends('layouts.app')

@section('title', 'Vendor')


@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="page-title">
                    <h2>{{ $retailer->name }}</h2>
                </div>
                <div class="ibox-content p-md">
                    @include('flash::message')
                    <div class="clearfix"></div>

                    <div class="tabs-container">
                        <ul class="nav nav-tabs" role="tablist">
                            <li><a class="nav-link active" data-toggle="tab" href="#tab-settings"> Settings</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#tab-keys"> API</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#tab-blocked-products"> Blocked Products</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" id="tab-settings" class="tab-pane active">

                                <div class="panel-body">

                                </div>
                            </div>
                            <div role="tabpanel" id="tab-keys" class="tab-pane">
                                <div class="panel-body">
                                    <h3>API Keys</h3>
                                    <a href="javascript:void(0)" class="btn btn-primary pull-right new_key_generate">Generate New Key</a>
                                    <div class="clearfix">
                                    <table class="table table-bordered table-hover">
                                        @foreach($keys as $key)
                                        <tr id="key-{{ $key->id }}" data-id="{{ $key->id }}">
                                            <td>{{ $key->key }}</td>
                                            <td><a href="javascript:void(0)" class="btn btn-xs btn-danger remove_key"> <i class="fa fa-trash"></i></a></td>
                                        </tr>
                                        @endforeach
                                    </table>
                                        <hr />
                                        {!! Form::open(['id' => 'form','novalidate' => 'novalidate' ]) !!}
                                        <div class="form-group">
                                            {!! Form::label('webhook_url','Webhook Url') !!}
                                            {!! Form::text('webhook_url' , $retailer->webhook_url , ['class' => 'form-control','placeholder' => 'Webhook Url','required'=>'true']) !!}
                                        </div>
                                        <div class="pull-right">
                                            <button class="btn btn-primary" type="submit">Update</button>
                                        </div>
                                        <div class="clearfix"></div>
                                        {!! Form::close() !!}
                                </div>
                            </div>

                        </div>
                            <div role="tabpanel" id="tab-blocked-products" class="tab-pane">

                                <div class="panel-body">
                                    <h3>Blocked Products</h3>
        <div class="row">
            <div class="col-6 offset-1">
                <input id="basicAutoComplete" class="form-control loading" type="text" autocomplete="on"
                    placeholder="Search products to block...">
            </div>
            <div class="col-2">
                <button type="button" class="btn btn-block btn-outline-secondary" id="btnAddProduct">
                    Block Product
                </button>
            </div>
            <div class="col-2">
                <button type="button" class="btn btn-block btn-outline-secondary" id="btnUnblockAll">
                    Unblock all products
                </button>
            </div>
        </div>

                                    @include('flash::message')
        @include('flash::message')

        <div class=" row pt-4 pb-4">
            <div class="card col-4 offset-4 p-4" >
                <div class="clearfix"></div>
                    <h4>Block a list of products</h4>
                    {!! Form::open(['id' => 'upload_csv', 'files' => true, 'url' => url('retailer/import-blocked/')]) !!}
                    <p>
                        Download this <a target="_blank" href="{{ url('retailer/import-blocked-sample') }}">sample spreadsheet</a> and fill in the product information
                    </p>
                    <div class="form-group">
                        {!! Form::label('csv_file','Choose CSV') !!}
                        {!! Form::file('csv_file') !!}
                        {!! Form::hidden('retailer_id', $retailer->id) !!}
                    </div>
                    <button type="submit" class="btn btn-primary">Import Spreadsheet</button>
                    {!! Form::close() !!}
            </div>
        </div>
                                    <div class="clearfix"></div>
                                    <div class="table-responsive">
                                        <table style="width: 100%;" class="table table-striped table-bordered table-hover"  id="product_listing">
                                            <thead>
                                                <tr>
                                                    <th style="width: 150px;">Image</th>
                                                    <th>Name</th>
                                                    <th>SKU</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                        </table>
                                        <tbody></tbody>
                                    </div>
                                </div>
                            </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('/plugins/dataTables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@v2.3.7/dist/latest/bootstrap-autocomplete.min.js"></script>
    <script>
     let blockedProductsTable = false;
        $(document).ready(function () {
           $('.new_key_generate').click(function() {
               $.ajax({
                   method: 'POST',
                   url: '{{ url('retailer/key-generate')}}',
                   data: 'retailer_id={{ $retailer->id }}&_token='+csrf_token,
               }).done(function() {
                   location.reload();
               });
           });
           $('.remove_key').click(function () {
                var id = $(this).closest('tr').attr('data-id');
                if(confirm('Are you sure want to delete ?')) {
                    $.ajax({
                        method: 'POST',
                        url: '{{ url('retailer/key-delete')}}',
                        data: 'key_id='+id+'&_token='+csrf_token,
                    }).done(function() {
                        $('#key-'+id).remove();
                    });
                }
           });
           blockedProductsTable = $('#product_listing').dataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search blocked products...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ url('retailer/product-listing') }}",
                    data: function (data) {
                        data.retailer_id = {{ $retailer->id }};
                    }
                }
            });
            $('#product_listing_filter').find('label').append($('.search-filters').html());
            $('.search-filters').html('');
            $('#basicAutoComplete').autoComplete({
                minLength: 2,
                resolverSettings: {
                    url: '/retailer/search-products'
                },
                events: {
                    search: function (qry, callback) {
                        $.ajax({
                            type: 'GET',
                            url: '/retailer/search-products',
                            data: `q=${qry}&=retailer_id=` + {{ $retailer->id }}
                        }).done(function (data) {
                            callback(data)
                        })
                    }
                }
            });

            let selectedValue = '';

            $('#basicAutoComplete').on('change', function () {
                selectedValue = '';
            });
            $('#basicAutoComplete').on('autocomplete.select', function (evt, item) {
                selectedValue = item.value;
            });


            $("#btnAddProduct").on('click', function () {
                if (selectedValue !== '') {
                    $.ajax({
                        type: 'POST',
                        url: '/retailer/block-product',
                        data: `id=${selectedValue}&type=id&retailer_id={{ $retailer->id }}&_token=`+csrf_token,
                    }).done(function () {
                        blockedProductsTable.DataTable().ajax.reload();
                        $('#basicAutoComplete').autoComplete('clear');
                    });
                } else {
                    sku = $('#basicAutoComplete').val();
                    $.ajax({
                        type: 'POST',
                        url: '/retailer/block-product',
                        data: `id=${sku}&type=sku&retailer_id={{ $retailer->id }}&_token=`+csrf_token,
                    }).done(function () {
                        blockedProductsTable.DataTable().ajax.reload();
                        $('#basicAutoComplete').autoComplete('clear');
                    });
                }
            })

            $("#btnUnblockAll").on('click', function () {
                $.ajax({
                    type: 'POST',
                    url: '/retailer/unblock-all',
                    data: `retailer_id={{ $retailer->id }}&_token=`+csrf_token,
                }).done(function () {
                    blockedProductsTable.DataTable().ajax.reload();
                    $('#basicAutoComplete').autoComplete('clear');
                });
            })
            $('.import_map_field').on('change', function () {
                var object = $(this).closest('tr');
                var column = parseInt($(this).val());
                column = !isNaN(column) ? column : 0;
                if( column > 0 ) {
                    column = column - 1;
                    var firstRecordValue = (sampleRecords[0] && sampleRecords[0][column]) ? sampleRecords[0][column] : '';
                    var secondRecordValue = (sampleRecords[1] && sampleRecords[1][column]) ? sampleRecords[1][column] : '';
                    var thirdRecordValue = (sampleRecords[2] && sampleRecords[2][column]) ? sampleRecords[2][column] : '';
                    $(object).find('.first_record').html(firstRecordValue);
                    $(object).find('.second_record').html(secondRecordValue);
                    $(object).find('.third_record').html(thirdRecordValue);
                }
            });
        });
           function unblockProduct(id,type){
                if (id !== '') {
                    $.ajax({
                        type: 'POST',
                        url: '/retailer/unblock-product',
                        data: `id=${id}&type=${type}&retailer_id={{ $retailer->id }}&_token=`+csrf_token,
                    }).done(function () {
                        blockedProductsTable.DataTable().ajax.reload();
                        $('#basicAutoComplete').autoComplete('clear');
                    });
                }
            }
    </script>
@endsection