@extends("admin.layouts.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2-bootstrap.min.css"
          rel="stylesheet"
          type="text/css"/>
    <style>
        [hidden] {
            display: none !important;
        }

        .btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all) {
            text-transform: capitalize;
        }
    </style>
@endsection
@section("content")
    <div class="row">
        <div class="col-md-8">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <span class="caption-subject bold uppercase">Syncs</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    @if(session()->has("message"))
                        <div class="alert alert-success">
                            <h4 style="margin-bottom: 0px"> {{session()->get("message")}}</h4>
                        </div>
                    @else
                        @if($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    @endif

                        <div class="table-scrollable">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th style="width:100px"></th>
                                    <th> Batch ID</th>
                                    <th> User</th>
                                    <th> Started</th>
                                    <th> Finished</th>
                                </tr>
                                </thead>
                                <tbody id="sync-table">
                                @forelse($sync_batches as $sync_batch)
                                    <tr id="{{$sync_batch->id}}">
                                        <td class="text-center">
                                        @switch($sync_batch->status)
                                            @case("Uploaded")
                                                 <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
                                            @break;
                                            @case("In-Progress")
                                                <div class="progress">
                                                    <div id="progress-{{$sync_batch->id}}" class="progress-bar progress-bar-striped active bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
                                                </div>
                                            @break;
                                            @case("Finished")
                                                <i class="fa fa-check-circle text-success"></i>
                                            @break
                                            @case("Failed")
                                                <i class="fa fa-times-circle text-danger"></i>
                                            @break
                                            @endswitch
                                        </td>
                                        <td>
                                            <a href="{{route("admin.sync.show",$sync_batch->id)}}">{{$sync_batch->batch_id}}</a>
                                        </td>
                                        <td class="text-center">
                                            {{ $sync_batch->user->name }}
                                        </td>
                                        <td class="text-center">
                                            {{ $sync_batch->created_at??"N/A" }}
                                        </td>
                                        <td class="text-center">
                                            {{ $sync_batch->finished_at??"N/A" }}
                                        </td>
                                    </tr>
                                @empty
                                @endforelse
                                </tbody>

                            </table>
                        </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <span class="caption-subject bold uppercase">New Sync</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    {{Form::open(['route'=>"admin.sync.store", 'role'=>"form", 'files' => true,"class"=>"fileUploadForm"])}}
                        <div class="form-body">
                        <input type="file" name="file">
                    </div>
                    <div class="form-actions noborder">
                        <div class="form-group">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped active bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                            </div>
                        </div>
                        <button  class="file-upload" type="submit" class="btn btn-default btn-block">Upload</button>
                    </div>
                    {!! Form::close() !!}
                    </div>
                </div>

        <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <span class="caption-subject bold uppercase">New Sync JSON</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    {{Form::open(['route'=>"admin.sync.store.json", 'role'=>"form", 'files' => true,"class"=>"fileUploadForm"])}}
                        <div class="form-body">
                        <input type="file" name="file">
                    </div>
                    <div class="form-actions noborder">
                        <div class="form-group">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped active bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                            </div>
                        </div>
                        <button  clas="file-upload" type="submit" class="btn btn-default btn-block">Upload</button>
                    </div>
                    {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
    <script src="https://js.pusher.com/7.2.0/pusher.min.js"></script>
    <script>

        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher('057393e873898491448c', {
            cluster: 'eu'
        });

        var channel = pusher.subscribe('my-channel');
        channel.bind('my-event', function(data) {
            if(data.message==="Finished"){
                $(".file-upload").prop("disabled",false);
                $("#progress-bar-"+data.batch_id).html('<i class="fa fa-check-circle text-success"></i>')
            }
            if(data.message==="Failed"){
                $(".file-upload").prop("disabled",false);
                $("#progress-bar-"+data.batch_id).html('<i class="fa fa-times-circle text-danger"></i>')
            }
            if(data.message==="Start"){
                $(".file-upload").prop("disabled",false);
                $("#progress-bar-"+data.batch_id).html('<div class="progress"> <div id="progress-'+data.batch_id+'" class="progress-bar progress-bar-striped active bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div> </div>')
            }
            if(data.message==="In-Progress"){
                $(".file-upload").prop("disabled",true);
                $('#progress-'+data.batch_id).css("width", data.progress+'%', function() {
                    return $(this).attr("aria-valuenow", data.progress) + "%";
                })
            }
            if(data.message==="Error"){
                $(".file-upload").prop("disabled",false);
                $('#progress-'+data.batch_id).css("width", data.progress+'%', function() {
                    return $(this).attr("aria-valuenow", data.progress) + "%";
                })
            }
        });
    </script>
    <script>
        $(function () {
            $(document).ready(function () {

                $('.fileUploadForm').ajaxForm({
                    beforeSend: function () {
                        var percentage = '0';
                        $(".file-upload").prop("disabled",false);
                    },
                    uploadProgress: function (event, position, total, percentComplete) {
                        var percentage = percentComplete;
                        $(".file-upload").prop("disabled",true);
                        $('.progress .progress-bar').css("width", percentage+'%', function() {
                            return $(this).attr("aria-valuenow", percentage) + "%";
                        })
                    },
                    complete: function (xdata,status) {
                        if(status === 'success' || status==='notmodified')
                        {
                            let data = $.parseJSON(xdata.responseText).batch;
                            console.log(data);
                            row = $("<tr id="+data.batch_id+"></tr>");
                            col1 = $("<td class='text-center' id='progress-bar-"+data.batch_id+"'><i class='fa fa-circle-o-notch fa-spin fa-fw'></i> </td>");
                            col2 = $("<td>"+data.batch_id+"</td>");
                            col3 = $("<td>"+data.created_at+"</td>");
                            col4 = $("<td>N/A</td>");
                            row.append(col1,col2,col3,col4).prependTo("#sync-table")
                        }

                        $(".file-upload").prop("disabled",true);

                    }
                });
            });
        });
    </script>
@endsection