@extends("admin.layouts.app")
@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <i class="icon-plus font-green"></i>
                        <span class="caption-subject bold uppercase">Sync Start</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    <div class="form-body">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-3">Create Date</label>
                                    <div class="col-md-9">
                                        {{$stock_batch->created_at}}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-3">User</label>
                                    <div class="col-md-9">
                                        {{$stock_batch->user->name}}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-3">File Name</label>
                                    <div class="col-md-9">
                                        {{$stock_batch->batch_id}}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-3">Items Count</label>
                                    <div class="col-md-9">
                                        {{$stock_batch->stocks()->count()}}
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped active" role="progressbar"
                                         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
                                        40%
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-stripped">
                                    <thead>
                                    <tr>
                                        <th>Item Name</th>
                                        <th>Item Code</th>
                                    </tr>
                                    </thead>
                                    <tbody id="table-items">

                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="form-actions noborder">
                            <button id="start" type="button" class="btn blue">Start Sync</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script>
        let jsonArray = {{$stock_batch->stocks()->take(3)->pluck("id")->toJson()}}
        let pages = 3


        function runRequest(index) {
            console.log(pages);
            console.log(index);
            if (index > pages) return;
            let id = jsonArray[index];
            console.log("Processing #" + id + "<br />");
            $.ajax({
                dataType: "JSON",
                data: {"id":id},
                type:"POST",
                contentType: 'application/json',
                url:'{{ route("admin.items.sync_start_post") }}',
                success: function(data)
                {
                    $("#table-items").append(data.row);
                    runRequest(index + 1);

                }
            });
        }

        $("#start").click(function(){
           runRequest(0);
        });

    </script>
@endsection