
{% extends 'layouts/default.twig' %}

{% block content %}
    <div class="lowContent selectSurgeryWrap">

        <div class="selectSurgery">

            <h2>Register with {{ site_name }}</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel dui pretium diam varius ultricies. Duis gravida scelerisque sapien id dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer diam libero, ultrices quis dui vitae, rhoncus consequat ligula. Cras maximus venenatis elit. Suspendisse non elementum diam. Quisque rutrum facilisis neque, in varius mi sagittis quis. Nunc ac tortor et est consectetur varius.</p>

            <script>
                var placesArray = {{ doctor_surgeries|raw }};
            </script>
            <!-- Sorry, Aaron! -->
            <table class="">
                <tr>
                    <td>
                        <div class="surgeriesMap">

                            <div>
                                <div>
                                    <h2>Doctor Surgery search</h2>

                                    <form class="stockistSearch">
                                        <div class="row">
                                            <label>Postcode</label>
                                            <div class="inputWrap">
                                                <input class="text" id="postcodeSearch" value="{{ postcode_search }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <button class="button" id="findSurgeryButton">Find my GP Surgery</button>
                                        </div>
                                    </form>

                                </div>

                                <div class="mapWrap">
                                    <div class="map mapSearch js_mapSearch" data-json-array="placesArray" style="height: 300px;"></div>
                                </div> <!-- .mapWrap -->
                            </div>
                        </div>
                    </td>
                    <td style="width:300px;">
                        <div id="stockistResults"></div>
                    </td>
                </tr>
            </table>

        </div> <!-- .selectSurgery -->

    </div> <!-- .lowContent.selectSurgeryWrap -->
<form method="post" id="findSurgeryForm">
    <input type="hidden" name="doctor_surgery_id" id="doctor_surgery_id" value="" />
    <input type="hidden" name="postcode_search" id="postcode_search" value="" />
    <input type="hidden" name="action" value="select_surgery" />
</form>
<script>
    if ($('.js_mapSearch').length > 0) {
        $('.js_mapSearch').mtcGoogleMaps({
            search: {
                search_results: '#stockistResults',
                search_form: '.stockistSearch',
            },
            marker: {
                icon: '/plugins/GoogleMaps/images/map_marker.png'
            },
            info_box: {
                close_button_markup: '<button>×</button>',
                width: 400,
                offset_x: -100,
                offset_y: -50,
                align_bottom: true,
                close_on_click: true,
                disable_auto_pan: false,
                info_box_class: 'infobox'
            }
        });
    }

    $(document).ready(function () {
        $('body').on('click', '.js_focusMarker', function (e) {
            $('#doctor_surgery_id').val($(this).data('place-id'));
            $('#postcode_search').val($('#postcodeSearch').val());
            $('#findSurgeryForm').submit();
        });

    });
    $(document).load(function() {
        if ($('#postcodeSearch').val() !== '') {
            $('#findSurgeryButton').trigger('click');
        }
    });
</script>

{% endblock %}
