@extends('layouts.empty')

@section('linktext')
    <link href="{{ asset('css/displayd1.css') }}" rel="stylesheet">
@endsection

@section('content')
    <div class="container-fluid" style="font-family: 'Futura Bk BT';">

        <div class="progress" style="height: 5px;">
            <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar"
                 style="width: 20%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

        <div class="row" style="min-height: 40px; font-size: 40px; padding-top: 4px; ">
            <div class="col-md-3" style="background-color: #303B45; color: #FFFFFF">
                <span id="block1" class="block1">{{ date("d.m.Y",strtotime($datecurrent)) }}</span>
            </div>
            <div class="col-md-3 text-center" style="background-color: #303B45;color: #FFFFFF">НЕ УПАКОВАНО</div>
            <div class="col-md-2 text-right" style="background-color: #303B45; color: #FFFFFF">
                <span id="time" class="time"></span>
            </div>
            <div class="col-md-4 text-center" style="background-color: #d4edda">УПАКОВАНО
            </div>
        </div>

        <div class="row" id="d1_table">
        </div>


        <div class="footer">
            <div class="row">
                <div style="position: fixed;right: 10px;bottom: 1px;font-size: 15px;">{{$_SERVER['REMOTE_ADDR']}}d1
                </div>
            </div>
        </div>
    </div>





@endsection

@section('scriptext')

    <script>

        var minut = 5;
        var restart = minut * 60 * 1000;

        var start = 0;
        var end = restart / 10;
        var step = 1.17;


        window.onload = function () {
            (function () {
                var time = new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
                $('.time').html(time);
                window.setTimeout(arguments.callee, 1000);
            })();


            (function () {

                if (start <= end) {
                    var value = start / end * 100;
                    $('.progress-bar-animated').css('width', value + '%');
                    start += step;
                } else {
                    start = 0;
                }

                window.setTimeout(arguments.callee, 10);
            })();

        };

        $(document).ready(function () {

            setInt();

            function getTable() {
                $.ajax({
                    type: 'get',
                    url: 'd1_table_ajax',
                    data: {
                        'typ': '',
                        '_token': "{{ csrf_token() }}"
                    },
                    success: function (data) {
                        $objtd = $('#d1_table');
                        $objtd.html(data);
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                });
            }

            function getTable1() {
                $.ajax({
                    type: 'get',
                    url: 'd2_ajax',
                    data: {
                        'typ': '',
                        '_token': "{{ csrf_token() }}"
                    },
                    success: function (data) {
                        $objtd = $('.block1');
                        $objtd.html(data['block1']);
                    },
                    error: function (data) {
                        console.log('Error:', data);
                    }
                });
            }

            function setInt() {
                getTable();

                var timerId = setInterval(function () {
                    getTable();
                    //getTable1();
                    $('.progress-bar-animated').css('width', '0%');
                    start = 0;

                }, restart);
            }

        });
    </script>

@endsection