{% extends '@RxConnexion/Layouts/global.html.twig' %}

{% block body %}

    <style>
        #rxgrab-current-datetime-live {
            color: #fff;
            font-size: 22px;
            line-height: 45px;
            vertical-align: middle;
            padding-right: 30px;
        }

        #rxgrab-schedule-next-patient-list {
            position: fixed;
            bottom: 0;
            left: 0;
            background: #3368b4;
            height: 30px;
            width: 100%;
        }

        #rxgrab-schedule-now-serving-container h1 {
            color: #080862 !important;
        }

        .rxgrab-schedule-now-serving-slick-info {
            height: 150px;
            width: 100%;
            border-top-right-radius: 75px;
            border-bottom-right-radius: 75px;
            border: 5px solid #001b6b;
            border-left: none;
            margin: 10px 0;
            background: #75a4dc;
        }

        .rxgrab-schedule-now-serving-slick-info h5 {
            width: 90%;
            background: #acc6e9;
            margin: 0;
            height: 45px;
            line-height: 45px;
            border-top-right-radius: 35px;
            border-bottom-right-radius: 10px;
            text-align: center;
            vertical-align: middle;
            color: #bc1817;
            font-size: 23px;
        }

        .rxgrab-schedule-now-serving-slick-info .label {
            background: transparent;
            display: block;
            font-size: 14px;
            color: #9a2b31;
            text-align: center;
        }

        .rxgrab-schedule-now-serving-slick-info .info {
            background: transparent;
            display: block;
            font-size: 16px;
            font-weight: bold;
            color: #061d8d;
            text-align: center;
        }

        .slick-slider, .slick-list, .slick-slide {
            height: auto !important;
        }
    </style>

    <div class="fixed rxgrab-fixed-header">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="{{ path('rx_grab_front_end') }}"><img class="rxgrab-logo" src="{{ asset('bundles/rxgrab/images/logo.png') }}" /></a></h1>
                </li>
            </ul>
            <section class="top-bar-section">
                <ul class="right">
                    <li id="rxgrab-current-datetime-live"></li>
                </ul>
            </section>
        </nav>
    </div>

    <div class="row full-width">
        <div class="xxlarge-2 xlarge-3 large-4 medium-5 small-12 colums">
            <div id="rxgrab-schedule-now-serving-container">
                <h1 class="text-center">Now Serving:</h1>
                <div id="rxgrab-schedule-now-serving-slick">
                    {% for row in healthFacility.schedulerequestsforlive %}
                        <div>
                            {% for scheduleRequest in row %}
                                <div class="rxgrab-schedule-now-serving-slick-info">
                                    <h5>Queue No. {{ scheduleRequest.queueno }}</h5>
                                    <div class="label">Doctor / Physician:</div>
                                    <div class="info">{{ scheduleRequest.provider.fullname }}</div>
                                    <div class="label">Patient Name:</div>
                                    <div class="info">{{ scheduleRequest.generaluser.fullname }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div id="rxgrab-schedule-next-patient-list">&nbsp;</div>

    <script>
        //<![CDATA[

        function currentTime() {

            var monthName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

                    dateObj  = new Date(),

                    day = dateObj.getDate(),
                    month = monthName[dateObj.getMonth()],
                    year = dateObj.getFullYear(),
                    hours = dateObj.getHours(),
                    minutes = dateObj.getMinutes(),
                    seconds = dateObj.getSeconds(),
                    period = hours > 11 ? 'PM' : 'AM';

            hours = hours > 12 ? hours % 12 : hours;
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            var currentTime = day + ' ' + month + ' ' + year + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + period;

            jQ('#rxgrab-current-datetime-live').html(currentTime);
        }

        jQ(document).ready(function(){

            setInterval(function(){currentTime()}, 1000);

            jQ('#rxgrab-schedule-now-serving-slick').slick({
                'arrows': false,
                'autoplay': true,
                'autoplaySpeed': 8000,
                'mobileFirst': true,
                'infinite': true,
                'speed': 500,
                'fade': true,
                'cssEase': 'linear'
            });

        });
        //]]>
    </script>

{% endblock %}