@extends('admin.layouts.app', ['title' => __('LightSpeed Product Search')])

@section('content')
    <!-- Header -->
    <div class="header bg-primary pb-6 pt-6">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="{{route('dashboard')}}"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">LightSpeed Product Search</li>
                            </ol>
                        </nav>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- Page content -->


    <div class="container-fluid mt--7">
        <div class="row light-sped-row">
            <div class="col-xl-12 order-xl-1">
                <div class="card bg-secondary shadow">
                    <div class="card-header bg-white border-0">
                        <div class="row align-items-center">
                            <div class="col"><h3 class="mb-0">{{ __('LightSpeed Product Search') }}</h3></div>
                        </div>
                    </div>
                    <div class="card-body table_form_wrap">
                        <div class="table-responsive">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="search" id="search" class="form-control"
                                               placeholder="Search Product">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <button type="button" class="btn btn-info" onclick="getpoducts()">Search
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-3 text-right">
                                    <div class="form-group">
                                        <button type="button" class="btn btn-success syncProducts" onclick="syncPoducts()" style="display: none"><i
                                                class='fas fa-sync-alt'></i>
                                            Sync
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <table class="table align-items-center table-flush" id="lightspeed-product-datatable" style="display: none">
                                <thead class="thead-light">
                                <tr>
                                    <th scope="col">itemID</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Qty</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>
            </div>
        </div>

        @include('admin.layouts.footers.auth')
    </div>
@endsection
@push('js')
    <script>

        // let search = 'all';
        // productData(search);

        function getpoducts() {
            let search = $('#search').val();
            if(search.length > 0) {
                $('#lightspeed-product-datatable').DataTable().clear().destroy();
                productData(search);
                $('#lightspeed-product-datatable').show();
                $('.syncProducts').show();
            }else{
                swal({
                    title: "Warning",
                    text: "Please Enter Product Name to search",
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    closeOnConfirm: true
                });
            }

        }

        function productData(search) {
            $('#lightspeed-product-datatable').DataTable({
                ajax: {
                    type: 'POST',
                    url: "{{ route('getLightspeed-datatable')}}",
                    data: {
                        'search': search,
                    },
                        error: function (jqXHR, textStatus, errorThrown) {
                        swal({
                            title: "Warning",
                            text: errorThrown,
                            type: "warning",
                            showCancelButton: false,
                            confirmButtonClass: "btn-success",
                            confirmButtonText: "Ok",
                            closeOnConfirm: true
                        });
                    }
                },
                destroy: true,
                bPaginate: false,
                bFilter: false,
                columns: [
                    {
                        data: 'itemID',
                        name: 'itemID'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'qty',
                        name: 'qty'
                    }

                ]
            });
        }

        function syncPoducts() {
            let itemIds = $('input[type=checkbox]:checked').map(function () {
                return this.value;
            }).get().join(",");

            if(itemIds.length > 0){
                $('.table_form_wrap').addClass('section-loader');
                let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    type: "post",
                    url: "{{ route('syncProducts')}}",
                    data: {
                        _token: CSRF_TOKEN,
                        itemIds: itemIds
                    },
                    success: function(data) {
                        $('.table_form_wrap').removeClass('section-loader');
                        $(".itemID").prop('checked', false);
                        $('#lightspeed-product-datatable').hide();
                        $('.syncProducts').hide();
                        $('#search').val("");
                        if(data.already_sync !== ''){
                            swal({
                                title: 'Below Product Already Synced',
                                text: data.already_sync,
                                confirmButtonColor: "#66BB6A",
                                type: "warning",
                                confirmButtonText: 'OK',
                                confirmButtonClass: 'btn btn-success',
                            });
                        }else{
                            swal({
                                title: 'Synced Successfully',
                                confirmButtonColor: "#66BB6A",
                                type: "warning",
                                confirmButtonText: 'OK',
                                confirmButtonClass: 'btn btn-success',
                            });
                        }

                    }
                });
            }else{
                swal({
                    title: "Warning",
                    text: "Please Select Product to Sync",
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    closeOnConfirm: true
                });
            }

        }

    </script>
@endpush