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

{% block body %}

    <style>

        {% set animationDelay = 0 %}

        {% for key,photo in healthFacility.photos %}
            {% if key > 0 %}
                {% set animationDelay = 6 * key %}
            {% endif %}
        {% endfor %}

        {% if animationDelay > 0 %}

            {% set animationDelay = animationDelay + 6 %}

            .cb-slideshow li span {
                -webkit-animation: imageAnimation {{ animationDelay }}s linear infinite 0s;
                -moz-animation: imageAnimation {{ animationDelay }}s linear infinite 0s;
                -o-animation: imageAnimation {{ animationDelay }}s linear infinite 0s;
                -ms-animation: imageAnimation {{ animationDelay }}s linear infinite 0s;
                animation: imageAnimation {{ animationDelay }}s linear infinite 0s;
            }

        {% endif %}

        {% set animationDelay = 0 %}

        {% for key,photo in healthFacility.photos %}

            {% if key == 0 %}

                .cb-slideshow li:nth-child({{ key + 1 }}) span { background-image: url('/{{ photo.photowebpath }}') }

            {% else %}

                {% set animationDelay = 6 * key %}

                .cb-slideshow li:nth-child({{ key + 1 }}) span {
                    background-image: url('/{{ photo.photowebpath }}');
                    -webkit-animation-delay: {{ animationDelay }}s;
                    -moz-animation-delay: {{ animationDelay }}s;
                    -o-animation-delay: {{ animationDelay }}s;
                    -ms-animation-delay: {{ animationDelay }}s;
                    animation-delay: {{ animationDelay }}s;
                }

            {% endif %}

        {% endfor %}

    </style>

    {% include '@RxConnexion/Layouts/fixed_header_only.html.twig' %}

    <div id="rxgrab-cb-slider-container">

        <ul class="cb-slideshow">
            {%  for photo in healthFacility.photos %}
                <li><span>{{ photo.parsedphotodescription }}</span></li>
            {% endfor %}
        </ul>

        <div id="rxgrab-floating-nav-container">
            <div class="row collapse">
                {% if healthFacility.account and app.session.has('forScheduleQuery') and app.session.get('forScheduleQuery').forSchedule == '1' %}
                    <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-6 columns text-center">
                        <a href="javascript:void(0)" class="rxgrab-floating-nav" data-id="#rxgrab-schedule-container">Schedule</a>
                    </div>
                    <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-6 columns text-center">
                        <a href="javascript:void(0)" class="rxgrab-floating-nav" data-id="#rxgrab-provider-container">Providers</a>
                    </div>
                    <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-6 columns text-center">
                        <a href="javascript:void(0)" class="rxgrab-floating-nav" data-id="#rxgrab-services-container">Services</a>
                    </div>
                    <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-6 columns text-center">
                        <a href="javascript:void(0)" class="rxgrab-floating-nav" data-id="#rxgrab-contact-us-container">Contact Us</a>
                    </div>
                {% else %}
                    <div class="xxlarge-4 xlarge-4 large-4 medium-4 small-4 columns text-center">
                        <a href="javascript:void(0)" class="rxgrab-floating-nav" data-id="#rxgrab-provider-container">Providers</a>
                    </div>
                    <div class="xxlarge-4 xlarge-4 large-4 medium-4 small-4 columns text-center">
                        <a href="javascript:void(0)" class="rxgrab-floating-nav" data-id="#rxgrab-services-container">Services</a>
                    </div>
                    <div class="xxlarge-4 xlarge-4 large-4 medium-4 small-4 columns text-center">
                        <a href="javascript:void(0)" class="rxgrab-floating-nav" data-id="#rxgrab-contact-us-container">Contact Us</a>
                    </div>
                {% endif %}
            </div>
        </div>

    </div>

    {% if healthFacility.account %}

        <div class="rxgrab-floating-nav-content" id="rxgrab-schedule-container">

            <h1>Schedule</h1>

            <div class="rxgrab-global-main-panel">

                {% set scheduleDate = app.session.has('forScheduleQuery') and app.session.get('forScheduleQuery').forSchedule == '1' ? app.session.get('forScheduleQuery').date : 'now'|date('m/d/Y') %}

                {% if healthFacility.scheduleType == 'Timed' %}

                    <h5>Schedule/s on {{ scheduleDate }}</h5>

                    <table class="display responsive" width="100%">
                        <thead>
                        <tr>
                            <th>Provider</th>
                            <th>Start Time</th>
                            <th>End Time</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for schedule in healthFacility.schedules %}
                            {% if schedule.scheduledateasstring == scheduleDate %}
                                <tr>
                                    <td>{{ schedule.provider.fullname }}</td>
                                    <td>{{ schedule.starttime }}</td>
                                    <td>{{ schedule.endtime }}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                        </tbody>
                    </table>

                    <script>
                        //<![CDATA[
                        jQ(document).ready(function() {
                            jQ('table').DataTable({
                                'jQueryUI': true,
                                'paging': false,
                                'searching': false,
                                'info': false,
                                'order': [[0, 'asc'], [1, 'desc']]
                            });
                        });
                        //]]>
                    </script>

                {% else %}

                    {#

                    {% set queueNo = 0 %}

                    {% for scheduleRequest in healthFacility.schedulerequests %}
                        {% if scheduleRequest.scheduledateasstring == scheduleDate and scheduleRequest.status == 'Queued' and queueNo < scheduleRequest.queueno %}
                            {% set queueNo = scheduleRequest.queueno %}
                        {% endif %}
                    {% endfor %}

                    #}

                    {% for providerHealthFacility in healthFacility.providerhealthfacilities %}

                        <h5>{{ providerHealthFacility.provider.fullname }} is now serving number {{ healthFacility.nowservingqueueno(scheduleDate, providerHealthFacility.provider) }}</h5>

                    {% endfor %}

                    {# <div style="font-style: italic;">Note: when you request for an schedule, it will not guarantee you that you will be next on queue to be scheduled.</div> #}

                {% endif %}

                <br/>

                <div class="row">
                    <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                        <a class="button success" href="{{ path('rx_grab_front_end_schedule_request', {i: healthFacility.id}) }}">Request For Schedule</a>
                    </div>
                    <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns text-right">
                        <a class="button secondary" href="{{ path('rx_grab_front_end_search_result_view_details_schedule_live', {id: healthFacility.id}) }}">View Live Schedule</a>
                    </div>
                </div>

            </div>

        </div>

    {% endif %}

    <div class="rxgrab-floating-nav-content" id="rxgrab-provider-container">
        <h1>Providers</h1>
        <div class="rxgrab-healthFacility-provider-slick-container">
            <div class="rxgrab-healthFacility-provider-slick">
                {% for healthFacilityProvider in healthFacility.providerHealthFacilities %}
                    <div>
                        <div class="rxgrab-healthFacility-provider-slick-photo-container">
                            <a href="javascript:void(0)"><img src="/{{ healthFacilityProvider.provider.photowebpath }}" /></a>
                        </div>
                        <div class="rxgrab-healthFacility-provider-slick-description-container">
                            <div>
                                <div><strong>{{ healthFacilityProvider.provider.fullname }}</strong></div>
                                <div>{{ healthFacilityProvider.provider.notes|raw }}</div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="rxgrab-floating-nav-content" id="rxgrab-services-container">
        <h1>Services</h1>
        <div>
            {{ healthFacility.services|raw }}
        </div>
    </div>

    <div class="rxgrab-floating-nav-content" id="rxgrab-contact-us-container">
        <h1>Contact Us</h1>
        <div class="row full-width">
            <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                <p><i class="fi-cloud"></i> {{ healthFacility.website != '' ? ('<a target="_blank" href="' ~ healthFacility.website ~ '">' ~ healthFacility.website ~ '</a>')|raw : 'N/A' }}</p>
                <p><i class="fi-social-facebook"></i> {{ healthFacility.facebook != '' ? ('<a target="_blank" href="' ~ healthFacility.facebook ~ '">' ~ healthFacility.facebook ~ '</a>')|raw : 'N/A' }}</p>
                <p><i class="fi-social-twitter"></i> {{ healthFacility.twitter != '' ? ('<a target="_blank" href="' ~ healthFacility.twitter ~ '">' ~ healthFacility.twitter ~ '</a>')|raw : 'N/A' }}</p>
                <p><i class="fi-telephone"></i> {{ healthFacility.concatenatedphoneno }}</p>
                <p><i class="fi-mobile"></i> {{ healthFacility.concatenatedmobileno }}</p>
                <p><i class="fi-mail"></i> {{ healthFacility.concatenatedemail }}</p>
            </div>
            <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                <div id="map-canvas-container"><div id="map-canvas"></div></div>
            </div>
        </div>
    </div>

    <div class="rxgrab-back-to-top-container">
        <a href="javascript:void(0)"><i class="fi-arrow-up"></i></a>
    </div>

    <script language="javascript">
        //<![CDATA[
        jQ(document).ready(function(){
            search_result_view_details.init_google_map("{{ healthFacility.description }}",{{ healthFacility.geolatitude != '' ? healthFacility.geolatitude : 0 }},{{ healthFacility.geolongitude != '' ? healthFacility.geolongitude : 0 }});
        });
        //]]>
    </script>

    {#

    <br/><br/>

    {% if healthFacility.backgroundwebpath != '' %}
        <style type="text/css">
            body {
                background: url('{{ global_url ~ '/' ~ healthFacility.backgroundwebpath }}');
                background-attachment: fixed;
                background-size: 100% 100%;
            }
        </style>
    {% endif %}

    <div class="row">
        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">

            <div class="rxgrab-global-main-panel">
                <div style="height: 300px;">{{ healthFacility.description }}'s Mini website Here!</div>
            </div>

            <br/><br/>

            {% if healthFacility.account and app.session.has('forScheduleQuery') and app.session.get('forScheduleQuery').forSchedule == '1' %}

                <div class="rxgrab-global-main-panel">

                    {% set scheduleDate = app.session.get('forScheduleQuery').date %}

                    {% if healthFacility.scheduleType == 'Timed' %}

                        <h5>Schedule/s on {{ scheduleDate }}</h5>

                        <table class="display responsive" width="100%">
                            <thead>
                            <tr>
                                <th>Provider</th>
                                <th>Start Time</th>
                                <th>End Time</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for schedule in healthFacility.schedules %}
                                {% if schedule.scheduledateasstring == scheduleDate %}
                                    <tr>
                                        <td>{{ schedule.provider.fullname }}</td>
                                        <td>{{ schedule.starttime }}</td>
                                        <td>{{ schedule.endtime }}</td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                            </tbody>
                        </table>

                        <script>
                            //<![CDATA[
                            jQ(document).ready(function() {
                                jQ('table').DataTable({
                                    'jQueryUI': true
                                });
                            });
                            //]]>
                        </script>

                    {% else %}

                        {% set scheduleCount = 0 %}

                        {% for scheduleQueued in healthFacility.schedulesqueued %}
                            {% if scheduleQueued.scheduledateasstring == scheduleDate and scheduleQueued.isqueued %}
                                {% set scheduleCount = scheduleCount + 1 %}
                            {% endif %}
                        {% endfor %}

                        <h5>There are {{ scheduleCount }} currently queued on {{ scheduleDate }}</h5>

                        <div style="font-style: italic;">Note: when you request for an schedule, it will not guarantee you that you will be next on queue to be scheduled.</div>

                    {% endif %}

                    <br/>

                    <a class="button success" href="{{ path('rx_grab_front_end_schedule_request', {i: healthFacility.id}) }}">Request For Schedule</a>

                </div>

            {% endif %}

            <br/><br/>

            <div class="rxgrab-global-main-panel">
                <h3>Location</h3>
                <div id="map-canvas-container"><div id="map-canvas"></div></div>
            </div>

            <br/><br/>

        </div>
    </div>

    <script language="javascript">
        //<![CDATA[
            jQ(document).ready(function(){
                search_result_view_details.init_google_map("{{ healthFacility.description }}",{{ healthFacility.geolatitude != '' ? healthFacility.geolatitude : 0 }},{{ healthFacility.geolongitude != '' ? healthFacility.geolongitude : 0 }});
            });
        //]]>
    </script>

    #}

{% endblock %}