{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <div class="row max-width-initial">
        <div class="small-12 columns">
            <div id="flash-messages-content-page"></div>
            <div class="content-container">
                <div class="content-container-content">
                    <div class="row max-width-initial" id="calendar-filter-container">
                        <div class="large-12 columns">
                            <div class="large-6 columns">
                                <div class="input-group">
                                    <div class="row">
                                        <label class="input-group-label" style="background-color: #2076a9; color: #fff;">Branch</label>
                                        <select class="input-group-field" id="schedule-facility-id">
                                            {% if userData.type != 'Super Admin' %}
                                                {% for healthFacility in healthFacilities if healthFacility.id in userData.branches %}
                                                    <option value="{{ healthFacility.id }}" {{ defaultHealthFacility == healthFacility.id ? 'selected' : '' }}>{{ healthFacility.description }}</option>
                                                {% endfor %}
                                            {% else %}
                                                {% for healthFacility in healthFacilities %}
                                                    <option value="{{ healthFacility.id }}">{{ healthFacility.description }}</option>
                                                {% endfor %}
                                            {% endif %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="large-6 columns">
                                <div class="input-group">
                                    <div class="row">
                                        <label class="input-group-label" style="background-color: #2076a9; color: #fff;">Date</label>
                                        <input type="text" class="date-picker input-group-field" id="calendar-appoinment-date" style="text-align: center" value="{{ 'now'|date('m/d/Y') }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="calendar-container">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="reveal large" id="modal" data-reveal>
        <div id="modal-content">
            <h5>Appointment Form</h5>
            <div id="flash-messages-content-modal"></div>
            <div class="content-detail-container" style="border:none!important;">
                <div class="row max-width-initial">
                    <div class="large-12 columns">
                        <div class="patient-detalye">
                            <div class="content-detail-container" style="border:none!important;">
                                <div class="row max-width-initial">
                                    <div class="large-4 columns" id="patient-autocomplete-detail">
                                        <div id="patient-detail">{#<h5 class="{{ action != 'u' ? 'hide' : '' }}">Patient Details</h5>#}</div>
                                        <div class="page-detail" id="patient-detail-id">{#<span #}{#class="{{ action != 'u' ? 'hide' : '' }}"#}{#><strong>ID:</strong> {{ schedule.patient.id|default('') }}</span>#}</div>
                                        {#{% if action == 'u' %}#}
                                            <div class="page-detail" id="patient-detail-name">{#<span><strong>Full Name:</strong><a href="{{ path('patient_detail', {'patient_id': schedule.patient.id|base64Encode}) }}" target="_blank"> {{ schedule.patient.fullName|default('') }}</a></span>#}</div>
                                        {#{% else %}
                                            <div class="page-detail" id="patient-detail-name"><span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Full Name:</strong><a href="javascript:void(0)"> {{ schedule.patient.fullName|default('') }}</a></span></div>
                                        {% endif %}#}
                                        <div class="page-detail" id="patient-detail-birthDate">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Birth Date:</strong> {{ schedule.patient.birthDateAsString|default('') }}</span>#}</div>
                                        <div class="page-detail" id="patient-detail-address">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Address:</strong> {{ schedule.patient.address|default('') }}</span>#}</div>
                                        <div class="page-detail" id="patient-detail-phn">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>PHN:</strong> {{ schedule.patient.personalHealthNo|default('') }}</span>#}</div>
                                        <div class="page-detail" id="patient-detail-mobile">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Mobile No(s):</strong> {{ schedule.patient.concatenatedMobileNo|default('') }}</span>#}</div>
                                        <div class="page-detail" id="patient-detail-phone">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Phone No(s):</strong> {{ schedule.patient.concatenatedPhoneNo|default('') }}</span>#}</div>
                                        <div class="page-detail" id="patient-detail-insurance">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Insurance(s):</strong> {{ schedule.patient.concatenatedPatientInsurance|default('') }}</span>#}</div>
                                        <div class="page-detail" id="patient-detail-referring-health-facility">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Insurance(s):</strong> {{ schedule.patient.concatenatedPatientInsurance|default('') }}</span>#}</div>
                                        <div class="page-detail" id="patient-detail-referring-provider">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Insurance(s):</strong> {{ schedule.patient.concatenatedPatientInsurance|default('') }}</span>#}</div>
                                    </div>
                                    <div class="large-4 columns">
                                        <div id="chart-latest">{#<h5 class="{{ action != 'u' ? 'hide' : '' }}">Latest Chart</h5>#}</div>
                                        <div class="page-detail" id="chart-detail-provider">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Clinician:</strong> {{ latestChartDetails.provider|default('') }}</span>#}</div>
                                        <div class="page-detail" id="chart-detail-health-facility">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Branch:</strong> {{ latestChartDetails.healthFacility|default('') }}</span>#}</div>
                                        <div class="page-detail" id="chart-detail-chart-type">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Chart Type:</strong> {{ latestChartDetails.chartType|default('') }}#}</div>
                                        <div class="page-detail" id="chart-detail-chart-status">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Chart Status:</strong> {{ latestChartDetails.chartStatus|default('') }}#}</div>
                                        <div class="page-detail" id="chart-detail-chart-date">{#<span class="{{ action != 'u' ? 'hide' : '' }}"><strong>Chart Date:</strong> {{ latestChartDetails.chartDate|default('') }}#}</div>
                                    </div>
                                    <div class="large-4 columns" id="branch-details">
                                        <div><h5>Branch Details</h5></div>
                                        <div class="page-detail" id="branch-detail-address">{#<span><strong>Address:</strong> {{ healthFacility.address|default('') }}</span>#}</div>
                                        <div class="page-detail" id="branch-detail-mobileNos">{#<span><strong>Fax No(s):</strong> {{ healthFacility.concatenatedMobileNo|default('') }}</span>#}</div>
                                        <div class="page-detail" id="branch-detail-phoneNos">{#<span><strong>Phone No(s):</strong> {{ healthFacility.concatenatedPhoneNo|default('') }}</span>#}</div>
                                        <a id="view-details">View Details</a>
                                        <div style="width: 100%; overflow: auto;">
                                            <table width="100%" id="distance-table" class="hide">
                                                {#{% if schedule.patient.geoLat|default('') != '' and schedule.patient.geoLong|default('') != '' %}#}
                                                <thead onclick="calendar.closeTbody()">
                                                <th>Branch</th>
                                                <th nowrap>Distance</th>
                                                <th>Duration</th>
                                                </thead>
                                                {#{% endif %}#}
                                                <tbody id="tbody-distance-table">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="city-warning" class="callout alert" style="display: none;"><i class="fa fa-warning"></i> WARNING: Patient is located at a different city.</div>
            <div id="patient-chart-warning" class="callout warning" style="display: none;"><i class="fa fa-warning"></i> WARNING: Last encounter branch is different.</div>
            <div class="row max-width-initial">
                <div class="large-8 columns" id="modal-form-container">

                </div>
                <div class="large-4 columns">
                    <div id="map-canvas"></div>
                </div>
            </div>
            <hr>
            <div class="row-max-width-initial">
                <div class="small-12 columns no-padding-right">
                    <div class="button-container clearfix text-right">
                        <a class="button href-schedule-calendar-action float-right" id="save-action"
                           data-message="Change of appointment status will also take effect in the corresponding encounter. Are you sure you want to continue?"
                           style="margin-left: 10px; margin-right: 0;"
                        >Save</a>
                        {% if userData.type == 'Super Admin' or 'Admin Schedule Delete' in userData.accesses %}
                            <button class="ask-continue button alert href-schedule-calendar-action float-right hide" id="delete-action" data-axn="d"
                                    data-message="Are you sure you want to delete this record?"
                                    style="margin-left: 10px; margin-right: 0;"
                            >Delete</button>
                        {% endif %}
                        <a href="javascript:void(0)" class="button secondary" data-close style="margin-left: 10px; margin-right: 0;">Close</a>
                    </div>
                </div>
            </div>
        </div>
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% include '@RxConnexion/Admin/js.html.twig' %}
    <script language="javascript">
        //<![CDATA[
        calendar.settings.scheduleViewUrl = '{{ path('calendar_view') }}';
        calendar.settings.calendar_formUrl = '{{ path('schedule_calendar_form') }}';
        calendar.settings.calendar_formActionUrl = '{{ path('calendar_form_save') }}';
        calendar.settings.patient_autocomplete_url = '{{ path('patient_autocomplete') }}';
        calendar.settings.provider_autocomplete_url = '{{ path('for_patient_schedule_provider_autocomplete') }}';
        calendar.settings.health_facility_autocomplete_url = '{{ path('health_facility_autocomplete') }}';
        calendar.settings.patientChartCheck_healthFacility_url = '{{ path('patient_chart_health_facility_check') }}';
        calendar.settings.chartType_autocomplete_url = '{{ path('chart_type_autocomplete') }}';
        calendar.settings.scheduleStatus_autocomplete_url = '{{ path('schedule_status_for_calendar_autocomplete') }}';
        calendar.settings.healthFacilityAjaxUrl = '{{ path('health_facility_for_map_ajax') }}';
        calendar.settings.healthFacilitiesData = '{{ hfLatLongs|json_encode|raw }}';
        jQ(document).ready(calendar.init);

        //]]>
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ googleMapApiKey }}&libraries=places&callback=calendar.initMap" async defer></script>
{% endblock %}