@extends('firm._layouts.master')

@section('content')

    <div class="trackingSectionNav">
        <a href="{{ route('firm.index') }}" class="btn btn-primary btn-lg back">
            <i class="fas fa-arrow-left fa-lg text-white mt-4 pt-2 mx-2 fa-2x"></i>
        </a>

        <div class="sectionName">
            {{ user()->trackingSection->name }}
        </div>

        <label class="toggle-icon group-button noselect">
            <input type="checkbox" name="group" {{ $group ? 'checked' : '' }}>
            <i class="fa fa-list-ol"></i>
        </label>

        <div class="time">{{ Carbon\Carbon::now()->format('h:i:s') }}</div>
    </div>

    <div id="contentContainer" class="kitchen pl-5">
        {!! $content !!}
    </div>

@endsection

@section('scripts')

    <script>
        $(function () {
            var initListeners = function () {
                var $orders = $('.order')

                $orders.not('.noticed').off()
                $orders.not('.noticed').on('click', function () {
                    var $this = $(this)
                    var url   = $this.attr('data-url') || ''

                    contentRefresher.resetTimer()

                    // instant status switch
                    if ($this.hasClass('order-new')) {
                        // console.log('new > kitchen');
                        $this.removeClass('order-new')
                        $this.addClass('order-kitchen')
                    } else if ($this.hasClass('order-kitchen')) {
                        // console.log('kitchen > completed');
                        $this.removeClass('order-kitchen')
                        $this.addClass('order-completed')
                    } else if ($this.hasClass('order-completed')) {
                        // console.log('completed > kitchen');
                        $this.removeClass('order-completed')
                        $this.addClass('order-kitchen')
                    }

                    $.ajax({
                        url    : url,
                        method : 'POST',
                        success: function (data) {
                            if ($this.hasClass('order-cancelled')) {
                                $this.removeClass('unnoticed').addClass('noticed')
                                $this.appendTo($this.parent())
                                $this.off('click')
                            }
                        }
                    })
                })

                setTimeout(function () {
                    location.replace('')
                }, 300000)

                groupButtonBusy = false
            }

            var contentRefresher = contentRefresh(false, initListeners)
            var groupButtonBusy  = false

            var $groupInput = $('input[name="group"]')

            $groupInput.change(function () {
                setUrl()
                contentRefresher.performRequest()
                groupButtonBusy = true
            })

            $('.group-button').click(function (e) {
                if (groupButtonBusy) {
                    e.preventDefault()
                    console.log('BUSY')
                }
            })

            var setUrl = function () {
                var url = '?getContent'

                if ($groupInput.prop('checked')) {
                    url += '&group=1'
                }

                contentRefresher.setSourceUrl(url)
            }

            // init
            setUrl()
            initListeners()
        })

    </script>

@endsection