@extends("admin.layouts.app")
@section("content")
    <div class="row">
        <div class="col-md-4">
            <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 Stock</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    <div class="form-body">
                        {{Form::open(['route'=>"admin.items.sync_post",'files'=>true,'role'=>"form"])}}
                        <div class="form-group">
                            {{Form::label("file","Sync File")}}
                            {{Form::file("file",['class'=>'form-control m-input'])}}
                        </div>
                        <div class="form-actions noborder">
                            <button type="submit" class="btn blue">Upload</button>
                        </div>
                        {!! Form::close() !!}
                        @if(session()->has('success'))
                            <div class="alert alert-success">
                                <h5>
                                    {{ session()->get('success') }}
                                </h5>
                            </div>
                        @endif
                        @if($errors->any())
                            <div class="alert alert-danger">
                                <h5>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </h5>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 bg-white">
            <div class="tabbable-panel">
                <div class="tabbable-line">
                    <ul class="nav nav-tabs ">
                        <li class="active">
                            <a href="#log-tab" data-toggle="tab">Sync Log </a></li>
                        <li>
                            <a href="#missing-tab" data-toggle="tab">Sync Missing Codes</a></li>

                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="log-tab">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>
                                        Sync
                                    </th>
                                    <th>
                                        User
                                    </th>
                                    <th>
                                        Status
                                    </th>
                                    <th>
                                        Updated at
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($logs as $log)
                                    <tr>
                                        <td style="width: 150px;">
                                            {{ $log->created_at->format('Y-m-d H:i:s') }}
                                        </td>
                                        <td style="width: 200px;">
                                            {{ $log->user->name }}
                                        </td>
                                        <td>
                                            {{ strtoupper($log->status) }}
                                            @if(!empty($log->properties['status_message']))
                                                <br/>
                                                {{ $log->properties['status_message'] }}
                                            @endif
                                        </td>
                                        <td>
                                            {{ $log->updated_at->format('Y-m-d H:i:s') }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">
                                            No data found.
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="4">
                                        {!! $logs->links() !!}
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="tab-pane" id="missing-tab">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th style="width: 50%;">
                                        Name
                                    </th>
                                    <th>
                                        Code
                                    </th>
                                    <th>
                                        Balance
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Id
                                    </th>
                                    <th>
                                        Action
                                    </th>
                                </tr>
                                </thead>

                                <tbody>
                                {!! Form::open(['url'=>route("admin.items.sync").'#missing-tab','method'=>"get"]) !!}

                                <tr>
                                    <td> {{Form::text("name",request()->get("name"),['class'=>"form-control form-filter input-sm"])}}</td>
                                    <td> {{Form::text("code",request()->get("code"),['class'=>"form-control form-filter input-sm"])}}</td>
                                    <td>
                                        <input name="has-balance" type="hidden" value="0"/>
                                        {{Form::checkbox("has-balance",1, request()->get('has-balance', 1))}}
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td style="display: flex">
                                        <button type="submit"
                                                class="btn btn-sm btn-success">
                                            <i class="fa fa-search"></i>
                                        </button>
                                        <a href="{{route("admin.items.sync").'#missing-tab'}}"
                                           class="btn btn-sm btn-info">
                                            <i class="fa fa-eraser"></i></a>
                                    </td>
                                    {!! Form::close() !!}
                                </tr>
                                @forelse($missings as $missing)
                                    <tr>
                                        <td style="width: 150px;">
                                            {{ $missing->name }}
                                        </td>
                                        <td style="width: 200px;">
                                            {{ $missing->code }}
                                        </td>
                                        <td>
                                            {{$missing->stock_balance??'-'}}
                                        </td>
                                        <td>
                                            {{ $missing->model_type?class_basename($missing->model_type):'-' }}
                                        </td>
                                        <td>
                                            {{ $missing->model_id??'-' }}
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            No data found.
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="6">
                                        {!! $missings->links() !!}
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function initTabHash() {
            //init tabs hash
            let hash = window.location.hash;

            if (hash.length) {
                let hasURLParameters = hash.indexOf('?');//-1 if not exist
                let indexOfHash = hash.indexOf('#');

                if (hasURLParameters && hasURLParameters > indexOfHash) {
                    hash = _.split(hash, '?')[0];
                }

                let $element = $('ul.nav a[href="' + hash + '"]');

                if ($element.length > 0) {
                    $element.tab('show');
                    let scroll = $element.offset().top - 150;
                    $("html, body").animate({scrollTop: scroll});

                }
            }

            $('.nav-tabs a').on("click", function (e) {
                $(this).tab('show');
                changeHashWithoutScrolling(this.hash);
                appendHashToLinks();
            });
        }

        function changeHashWithoutScrolling(hash) {
            var id;
            var elem;

            id = hash.replace(/^.*#/, '');

            if (id) {
                elem = document.getElementById(id);

                if (elem) {
                    elem.id = id + '-tmp';
                    window.location.hash = hash;
                    elem.id = id;
                }
            }
        }

        function appendHashToLinks() {
            $('.pagination').each(function (element) {
                var hash = window.location.hash;
                var links = $(this).find('a');

                links.each(function (link) {
                    var href = $(this).attr('href');
                    href = href.replace('#missing-tab', '');
                    href = href.replace('#log-tab', '');
                    $(this).attr('href', href + hash);
                });
            });
        }

        $(function () {
            initTabHash();
            appendHashToLinks();
        })
    </script>
@endsection