{% extends '@RxConnexion/Admin/content.html.twig' %}
{% block content %}
    <div id="flash-messages-container">
    </div>
    <div class="row max-width-initial">
        <div class="small-12 columns">
            <nav aria-label="You are here:" role="navigation">
                <ul class="breadcrumbs">
                    <li><a href="{{ path('provider') }}">Clinician List</a></li>
                    <li>
                        <span class="show-for-sr">Current: </span> Clinician Details
                    </li>
                </ul>
            </nav>
            {% include '@RxConnexion/Provider/overview.html.twig' with {provider: provider} %}
            <br/>
            <div class="content-container has-loading">
                <div class="content-container-content hide">
                    <ul class="tabs custom-tabs" data-tabs id="provider-tabs">
                        {% if userData.type == 'Super Admin' or 'Admin Provider Health Facility' in userData.accesses %}
                            <li class="tabs-title {{ tab is null or tab is empty or tab == 'm' ? 'is-active' : '' }}" data-dt-id="medicalFacilities-datalist"><a href="#panel-medical-facilities" aria-selected="true">Branch</a></li>
                        {% endif %}
                        {% if userData.type == 'Super Admin' or 'Admin Provider Work Schedule' in userData.accesses %}
                            <li class="tabs-title {{ tab == 'ps' ? 'is-active' : '' }}" data-dt-id="workSchedule-datalist"><a href="#panel-work-schedule" aria-selected="false">Work Schedule</a></li>
                        {% endif %}
                    </ul>
                    <div class="tabs-content custom-tabs-content" data-tabs-content="provider-tabs">
                        <div class="tabs-panel {{ tab is null or tab is empty or tab == 'm' ? 'is-active' : '' }}" id="panel-medical-facilities">

                            <div class="text-right">
                                {% if userData.type == 'Super Admin' or 'Admin Provider Health Facility New' in userData.accesses %}
                                    <a href="javascript:void(0)" class="href-medical-facility-form href-new-action" data-action="n" data-id="0">Add Branch</a>
                                {% endif %}
                            </div>
                            <table class="display responsive" id="medicalFacilities-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Company</th>
                                    <th>Branch</th>
                                    <th>Description</th>
                                    <th>Mobile No.</th>
                                    <th>Phone No.</th>
                                    <th>Email</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="tabs-panel {{ tab == 'ps' ? 'is-active' : '' }}" id="panel-work-schedule">
                            <div class="row">
                                <div class="large-4 columns">
                                    <div class="input-group">
                                        <label class="input-group-label">Type</label>
                                        <select class="input-group-field" id="work-schedule-filter-type">
                                            <option value="" selected>All</option>
                                            <option value="Regular" >Regular</option>
                                            <option value="Irregular">Irregular</option>
                                            <option value="Out">Out</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                {% if userData.type == 'Super Admin' or 'Admin Physician Work Schedule New' in userData.accesses %}
                                    <a href="javascript:void(0)" class="href-work-schedule-form href-new-action" data-action="n" data-id="0">New Work Schedule</a>
                                {% endif %}
                            </div>
                            <table class="display responsive" id="workSchedule-datalist" width="100%">
                                <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Branch</th>
                                    <th>From Date</th>
                                    <th>From Time</th>
                                    <th>To Date</th>
                                    <th>To Time</th>
                                    <th>Day</th>
                                    <th>Note</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>

                            {% if userData.type == 'Super Admin' or 'Admin Provider Work Schedule History' in userData.accesses %}
                                <br>
                                <hr>
                                <h5>History</h5>
                                <table class="display responsive" id="workScheduleHistory-datalist" width="100%">
                                    <thead>
                                    <tr>
                                        <th>Action</th>
                                        <th>Date</th>
                                        <th>User</th>
                                        {#<th>Label</th>#}
                                        <th>Detail</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="reveal small" id="modal" data-reveal>
        <div id="modal-content"></div>
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="reveal large" id="large-modal" data-reveal>
        <div id="large-modal-content"></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[
        provider_detail.settings.provider_id = '{{ provider_id }}';
        provider_detail.settings.medicalFacilities_ajaxUrl = '{{ path('provider_health_facilities_ajax_list') }}';
        provider_detail.settings.workSchedule_ajaxUrl = '{{ path('provider_work_schedule_ajax_list') }}';
        provider_detail.settings.medicalFacilities_formUrl = '{{ path('provider_health_facilities_form', {provider_id:provider_id}) }}';
        provider_detail.settings.medicalFacilities_formActionUrl = '{{ path('provider_health_facilities_save') }}';
        provider_detail.settings.workSchedule_formUrl = '{{ path('provider_work_schedule_form', {provider_id:provider_id}) }}';
        provider_detail.settings.workSchedule_formActionUrl = '{{ path('provider_work_schedule_save') }}';
        provider_detail.settings.medicalFacility_autocompleteUrl = '{{ path('health_facility_autocomplete') }}';
        provider_detail.settings.workScheduleHistory_ajaxUrl = '{{ path('provider_work_schedule_history_ajax_list') }}';
        jQ(document).ready(provider_detail.init);
        //]]>
    </script>
{% endblock %}