@extends('decorator.console')

@section('page-title')
    {{ trans('queueCounter.open.title') }}
@stop

@section('html-head')
    <meta name="menu" content="queueManagementMenu">
@stop

@section('page-wrapper')
    <div class="row">
        <div class="col-md-12">
            <h1 class="page-header"> {{ trans('queueCounter.open.heading') }} </h1>
            <p> {{ trans('queueCounter.open.message') }} </p>
            <ol class="breadcrumb breadcrumb-dark col-md-12">
                <li><a href="{{ url('/console/dashboard') }}"> {{ trans('breadcrumb.dashboard') }} </a></li>
                <li class="active"> {{ trans('breadcrumb.queueManagement.queueCounter') }} </li>
            </ol>
        </div>
    </div>

    @include('common.console.message')

    <div id="actions" class="form-actions">
        <a class="btn btn-default" href="{{ url('/console/dashboard') }}">
            <i class="glyphicon glyphicon-ok"></i> Done
        </a>
        <a class="btn btn-danger" href="{{ url('/console/queueCounters/close') }}?queueCounterId={{ $queueCounter->id }}">
            <i class="glyphicon glyphicon-ok"></i> Close Counter
        </a>
    </div>

    <div class="clear-large"></div>

    <div class="row">
        <div class="col-md-4">
            <div class="lining lining-active hover-effect">
                <div class="lining-head lining-head-active">
                    <h3>
                        {{ $queueLine->name }}
                    </h3>
                </div>
                <div id="queue-line-customers" class="lining-content list-unstyled">

                </div>
                <div class="lining-footer">
                    <p>{{ $queueLine->description }}</p>
                    <!--a href="javascript:;" class="btn yellow-crusta">
                        Sign Up
                    </a-->
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="lining lining-active hover-effect">
                <div class="lining-head">
                    <h3>
                        {{ $queueCounter->name }}
                    </h3>
                </div>
                <div id="queue-counter-customers" class="lining-content list-unstyled">
                    <div class="row">
                        <div class="panel panel-default modal-dialog">
                            <div class="panel-body">
                                <span class="title-serving">Now Serving</span>
                                <hr/>
                                <span id="queue-ticket-number" class="title hide"></span>
                                <section id="no-ticket" class="title">
                                    Currently you are not serving anyone.<br>You can start serving by clicking "Call next" button.
                                </section>
                                <hr/>
                                <div>
                                    <button id="queueTicket-recall" class="btn btn-info btn-pressure pull-left">RECALL</button>
                                    <button id="queueTicket-noShow" class="btn btn-danger btn-pressure pull-left">NO SHOW</button>

                                    <button id="queueTicket-CallNext" class="btn btn-success btn-pressure pull-right">CALL NEXT</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lining-footer">
                    <p>{{ $queueCounter->description }}</p>
                    <!--a href="javascript:;" class="btn yellow-crusta">
                        Sign Up
                    </a-->
                </div>
            </div>
        </div>
    </div>

    @include('console.queueCounterOpen_style')
    @include('console.queueCounterOpen_script')

@stop