@extends('decorator.console')

@section('page-title')
    {{ trans('queueCounter.list.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.list.heading') }} </h1>
            <p> {{ trans('queueCounter.list.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>
    </div>

    <section id="login">
        <div class="row">
            <div class="col-xs-12 col-md-offset-4 col-md-4">
                <div class="form-wrap">
                    <h1>Open Queue Counter</h1>
                    <form role="form" action="javascript:;" method="post" id="login-form" autocomplete="off">
                        <div class="form-group">
                            <label for="queue_line_id" class="sr-only">Queue Line</label>
                            <select id="queue_line_id" name="queue_line_id" class="form-control">
                                <option value=""> -- Select Queue Line -- </option>
                                @foreach($listOfQueueLine as $key => $queueLine)
                                    <option value="{{ $queueLine->id }}"> {{ $queueLine->name }} </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="queue_counter_id" class="sr-only">Queue Line</label>
                            <select id="queue_counter_id" name="queue_counter_id" class="form-control">
                                <option> -- Select Queue Counter -- </option>
                            </select>
                        </div>
                        <input type="submit" id="open-queueCounter" class="btn btn-custom btn-lg btn-block" value="Open">
                    </form>
                    <hr>
                </div>
            </div>
        </div>
    </section>

    <style>
        #login h1 { color: #1fa67b; font-size: 18px; text-align: center; font-weight: bold; padding-bottom: 20px; }
        #login .form-group { margin-bottom: 25px; }
        #login .checkbox .label { color: #6d6d6d; font-size: 13px; font-weight: normal; }
        #login .btn.btn-custom { font-size: 14px; margin-bottom: 20px; }

        .form-control { color: #212121; }
        .btn-custom { color: #fff; background-color: #1fa67b; }
        .btn-custom:hover, .btn-custom:focus { color: #fff; }
    </style>

    <script>
        $(document).ready(function() {
            Change_Queue_Counter_List();
            $('#queue_line_id').on('change', function() {
                Change_Queue_Counter_List();
            });
            $('#open-queueCounter').on('click', function(){
                Open_Queue_Counter();
            });
        });

        function Change_Queue_Counter_List(){
            Queue_Line_Id = $('#queue_line_id').val();

            pleaseWaitDialog.showPleaseWait();
            request = $.ajax({
                url: "{{ url('/console/queueCounters/list') }}",
                type: "get",
                data: {"queue_line_id":Queue_Line_Id }
            });

            request.done(function (result, textStatus, jqXHR){
                console.log( "RESULT : " + JSON.stringify(result));
                pleaseWaitDialog.hidePleaseWait();
                if (result.status == "OK") {
                    var listOfQueueCounter = result.returnData.listOfQueueCounter;
                    Queue_Counter_Options = "<option value=''> -- Select Queue Counter -- </option>";
                    $.each(listOfQueueCounter, function(i, queueCounter) {
                        Queue_Counter_Options = Queue_Counter_Options + "<option value='"+queueCounter.id+"'>"+queueCounter.name+"</option>";
                    });
                    $('#queue_counter_id').html(Queue_Counter_Options);
                } else if (result.status == "ERROR") {

                } else {
                    swal({title: "Error!", text: "Something went wrong! Please contact Administrator.", type: "error", html: true });
                }
            });

            request.fail(function (result, textStatus, errorThrown){
                pleaseWaitDialog.hidePleaseWait();
                swal("Error!", result.responseText, "error");
            });
        }

        function Open_Queue_Counter() {
            Queue_Line_Id = $('#queue_line_id').val();
            Queue_Counter_Id = $('#queue_counter_id').val();
            if (!Queue_Counter_Id.trim()) {
                swal({title: "Empty Fields", text: "Please select Counter!!", type: "warning", html: true });
            } else {
                window.location = "{{ url('/console/queueCounters/open?queueCounterId=') }}"+Queue_Counter_Id;
            }

        }
    </script>

@stop