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

{% block body %}

    <div class="fixed rxconnexion-fixed-header">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1>{#<a href="{{ path('rx_grab_main') }}">#}<img src="{{ asset('bundles/rxconnexion/images/logo.png') }}">{#</a>#}</h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
            </ul>
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right rxconnexion-frontend-nav-button-container">
                    <li><a class="rxconnexion-frontend-nav-link" href="{{ path('general_user_login') }}">Patient Login</a></li>
                    <li><a class="rxconnexion-frontend-nav-link" href="{{ path('login') }}">Clinic Login</a></li>
                    {#<li><a class="rxconnexion-frontend-nav-link" href="{{ path('health_facility_registration') }}">Register Your Clinic</a></li>#}
                </ul>
            </section>
        </nav>
    </div>
    <div class="rxconnexion-frontend-bg" id="rxconnexion-frontend-bg1">
        <div id="rxconnexion-frontend-search-container">
            <div class="row">
                <div class="xxlarge-9 xxlarge-centered xlarge-9 xlarge-centered large-9 large-centered medium-10 medium-centered small-12 columns">
                    {#<form method="POST" action="{{ path('rx_grab_front_end_search_result') }}">#}
                        <div id="rxconnexion-frontend-main-search-container">
                            <div class="row collapse">
                                <div class="xxlarge-9 xlarge-9 large-9 medium-9 small-6 columns">
                                    <input type="text" name="searchQuery" placeholder="Enter Clinic Name, Address, City or Province" autocomplete="off" class="wradius"/>
                                </div>
                                <div class="xxlarge-2 xlarge-2 large-2 medium-2 small-4 columns">
                                    <select name="healthFacilityType">
                                        <option value="all">All Types</option>
                                        {% for healthFacilityType in healthFacilityTypes %}
                                            <option value="{{ healthFacilityType.id }}">{{ healthFacilityType.description }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="xxlarge-1 xlarge-1 large-1 medium-1 small-2 columns">
                                    <button type="submit" class="button tiny button-no-custom-style"><i class="fi-magnifying-glass"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="rxconnexion-frontend-advance-search-container">
                            <div class="text-right" id="toggle-container"><a href="javascript:void(0)">Advance Search</a></div>
                            <div id="search-container" style="display: none">
                                <div class="row">
                                    <div class="xxlarge-10 xlarge-10 large-10 medium-10 small-10 columns">
                                        <label><strong>Advance Search:</strong></label>
                                    </div>
                                    <div class="xxlarge-2 xlarge-2 large-2 medium-2 small-2 columns text-right">
                                        <a href="javascript:void(0)"><i class="fi-x"></i></a>
                                    </div>
                                </div>
                                <div class="row collapse">
                                    <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                                        <input type="text" name="clinicNameQuery" placeholder="Enter Clinic Name" autocomplete="off" />
                                    </div>
                                    <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                                        <input type="text" name="addressQuery" placeholder="Enter Address" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="row collapse">
                                    <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                                        <input type="text" name="cityQuery" placeholder="Enter City" autocomplete="off" />
                                    </div>
                                    <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                                        <input type="text" name="provinceQuery" placeholder="Enter Province" autocomplete="off" />
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                                        <label>
                                            <input type="checkbox" name="forSchedule" id="forSchedule" value="1" />
                                            For Schedule
                                        </label>
                                    </div>
                                </div>
                                <div id="for-schedule-query-container">
                                    <div class="row">
                                        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
                                            <label>Preferred Date</label>
                                            <input type="text" class="date" name="preferredDateQuery" value="{{ 'now'|date('m/d/Y') }}" placeholder="MM/DD/YYYY" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                                            <label>Preferred Time From</label>
                                            <div class="row collapse">
                                                <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-3 columns">
                                                    <select name="preferredTimeFromHourQuery">
                                                        <option value="1">01</option>
                                                        <option value="2">02</option>
                                                        <option value="3">03</option>
                                                        <option value="4">04</option>
                                                        <option value="5">05</option>
                                                        <option value="6">06</option>
                                                        <option value="7">07</option>
                                                        <option value="8">08</option>
                                                        <option value="9">09</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                    </select>
                                                </div>
                                                <div class="xxlarge-1 xlarge-1 large-1 medium-1 small-1 columns text-center">:</div>
                                                <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-3 columns">
                                                    <select name="preferredTimeFromMinuteQuery">
                                                        <option value="0">00</option>
                                                        <option value="5">05</option>
                                                        <option value="10">10</option>
                                                        <option value="15">15</option>
                                                        <option value="20">20</option>
                                                        <option value="25">25</option>
                                                        <option value="30">30</option>
                                                        <option value="35">35</option>
                                                        <option value="40">40</option>
                                                        <option value="45">45</option>
                                                        <option value="50">50</option>
                                                        <option value="55">55</option>
                                                    </select>
                                                </div>
                                                <div class="xxlarge-1 xlarge-1 large-1 medium-1 small-1 columns text-center">&nbsp;</div>
                                                <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-3 columns end">
                                                    <select name="preferredTimeFromPeriodQuery">
                                                        <option value="AM">AM</option>
                                                        <option value="PM">PM</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="xxlarge-6 xlarge-6 large-6 medium-6 small-12 columns">
                                            <label>Preferred Time To</label>
                                            <div class="row collapse">
                                                <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-3 columns">
                                                    <select name="preferredTimeToHourQuery">
                                                        <option value="1">01</option>
                                                        <option value="2">02</option>
                                                        <option value="3">03</option>
                                                        <option value="4">04</option>
                                                        <option value="5">05</option>
                                                        <option value="6">06</option>
                                                        <option value="7">07</option>
                                                        <option value="8">08</option>
                                                        <option value="9">09</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                    </select>
                                                </div>
                                                <div class="xxlarge-1 xlarge-1 large-1 medium-1 small-1 columns text-center">:</div>
                                                <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-3 columns">
                                                    <select name="preferredTimeToMinuteQuery">
                                                        <option value="0">00</option>
                                                        <option value="5">05</option>
                                                        <option value="10">10</option>
                                                        <option value="15">15</option>
                                                        <option value="20">20</option>
                                                        <option value="25">25</option>
                                                        <option value="30">30</option>
                                                        <option value="35">35</option>
                                                        <option value="40">40</option>
                                                        <option value="45">45</option>
                                                        <option value="50">50</option>
                                                        <option value="55">55</option>
                                                    </select>
                                                </div>
                                                <div class="xxlarge-1 xlarge-1 large-1 medium-1 small-1 columns text-center">&nbsp;</div>
                                                <div class="xxlarge-3 xlarge-3 large-3 medium-3 small-3 columns end">
                                                    <select name="preferredTimeToPeriodQuery">
                                                        <option value="AM">AM</option>
                                                        <option value="PM">PM</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="rxconnexion-frontend-bg" id="rxconnexion-frontend-bg2">
    </div>
    <div class="rxconnexion-frontend-bg" id="rxconnexion-frontend-bg3">
    </div>
    <div class="rxconnexion-frontend-bg" id="rxconnexion-frontend-bg4">
    </div>
    {#    <div id="rxconnexion-frontend-footer-container">
            <div class="row">
                <div class="xxlarge-4 xlarge-4 large-4 medium-4 small-12 columns">
                    Alrights Reserve 2015
                </div>
                <div class="xxlarge-4 xlarge-4 large-4 medium-4 small-12 columns">
                    Something here <br/>
                    Something here <br/>
                    Something here <br/>
                    Something here <br/>
                    Something here <br/>
                    Something here
                </div>
                <div class="xxlarge-4 xlarge-4 large-4 medium-4 small-12 columns">
                    Something here <br/>
                    Something here <br/>
                    Something here <br/>
                    Something here <br/>
                    Something here <br/>
                    Something here
                </div>
            </div>
        </div>#}

    <script>
        //<![CDATA
        jQ(document).ready(function(){

            global.init_bg('rxconnexion-frontend-bg', 4);
            //global.maskDate();
            jQ('.date').mask('99/99/9999').datepicker({minDate: new Date()});

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

{% endblock %}
