@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 row">
                    <div class="col-md-10 caption font-green">
                        <span class="caption-subject bold uppercase">Syncs</span>
                    </div>

                    <div class="col-md-2 btn-group caption font-red">
                        <form action="{{route('admin.run-cleanup')}}" method="post">
                            @csrf
                            <button type="submit" class="btn red-haze btn-sm" >
                                Clean Sync
                            </button>
                        </form>
                    </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
                        @isset($errors)
                            @foreach($errors as $key => $error)
                                <div dir="rtl" class="alert alert-danger alert-dismissible" role="alert">
                                    <strong>{{'خطأ !'}}</strong> {{$error[0]}}
                                    <button dir="ltr" type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                </div>
                            @endforeach
                        @endisset
                    @endif

                        <div class="table-scrollable">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th style="width:100px"></th>
                                    <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">
                                            @if($sync_batch->with_force)
                                                <i style="color:#000000" class=" fa fa-bolt" title="With Force"></i>
                                            @else
                                                <i style="color:#c9c9c9" class=" fa fa-bolt" title="Without Force"></i>
                                            @endif
                                            @if($sync_batch->with_missing)
                                                <i style="color:#000000" class=" fa fa-eye-slash"
                                                   title="With Missing"></i>
                                                @else
                                                    <i style="color:#c9c9c9" class=" fa fa-eye-slash"
                                                       title="Without Missing"></i>
                                                @endif

                                        </td>
                                        <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])}}
                    <div class="form-body">
                        <input type="file" name="file">
                    </div>
                    <div class="form-group">
                        <label for="with_force">
                            {!! Form::checkbox("force",1,0,['class'=>'checkbox',"id"=>"force-checkbox", 'style'=> 'display: inline-block']) !!}
                            Force Sync</label>
                    </div>
                    <div class="form-group">
                        <label for="with_missing">
                            {!! Form::checkbox("missing",1,0,['class'=>'checkbox',"id"=>"missing-checkbox", 'style'=> 'display: inline-block']) !!}
                            With Missing Items</label>
                    </div>
                    <div class="form-actions noborder">
                        <button type="submit" class="btn btn-default btn-block">Upload</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>

            @if(false)
                <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <span class="caption-subject bold uppercase">New Missing Codes Sync</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>
                    <div class="form-group">
                        <label for="with_missing">
                            {!! Form::checkbox("with_missing",1,0,['class'=>'checkbox', 'style'=> 'display: inline-block']) !!}
                            With Missing Codes</label>
                    </div>
                    <button type="submit" class="btn btn-default btn-block file-upload">Upload</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
            @endif
        </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);

                    }
                });
            });
        });

        $(document).ready(function () {
            $('#missing-checkbox').change(function () {
                if ($(this).is(':checked')) {
                    $('#force-checkbox').prop('checked', true);
                }
            });
        });
    </script>
@endsection