{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $("#add-timing").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            document.addTimingForm.submit();
                            $(this).dialog("close");
                        }
                    }
                ]
            });


            $("#btn-add-timing").click(function () {
                $("#add-timing").dialog("open");
            });

            $("input[id$='-cutoff_time']").timeEntry({
                show24Hours: false,
                showSeconds: true,
                defaultTime: '00:00:00',
                ampmPrefix: ' ',
                spinnerImage: ''
            });

            $("input[id$='-resume_time']").timeEntry({
                show24Hours: false,
                showSeconds: true,
                defaultTime: '00:00:00',
                ampmPrefix: ' ',
                spinnerImage: ''
            });

            $("input[id$='-ship_time']").timeEntry({
                show24Hours: false,
                showSeconds: true,
                defaultTime: '00:00:00',
                ampmPrefix: ' ',
                spinnerImage: ''
            });

             $("input[id$='-start_day_shift_time']").timeEntry({
                show24Hours: false,
                showSeconds: true,
                defaultTime: '00:00:00',
                ampmPrefix: ' ',
                spinnerImage: ''
            });

            $("input[id$='-day_of_week_0']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_0", "");

                if ($(this).prop('checked')) {
                    $("#" + grpnm + "-day_of_week_1").prop('checked', false);
                     $("#" + grpnm + "-day_of_week_2").prop('checked', false);
                     $("#" + grpnm + "-day_of_week_3").prop('checked', false);
                     $("#" + grpnm + "-day_of_week_4").prop('checked', false);
                     $("#" + grpnm + "-day_of_week_5").prop('checked', false);
                     $("#" + grpnm + "-day_of_week_6").prop('checked', false);
                     $("#" + grpnm + "-day_of_week_7").prop('checked', false);
                }
            });

            $("input[id$='-day_of_week_1']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_1", "");
                if ($(this).prop('checked')) {
                     $("#" + grpnm + "-day_of_week_0").prop('checked', false);
                }
            });

            $("input[id$='-day_of_week_2']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_2", "");
                if ($(this).prop('checked')) {
                     $("#" + grpnm + "-day_of_week_0").prop('checked', false);
                }
            });

            $("input[id$='-day_of_week_3']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_3", "");
                if ($(this).prop('checked')) {
                     $("#" + grpnm + "-day_of_week_0").prop('checked', false);
                }
            });

            $("input[id$='-day_of_week_4']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_4", "");
                if ($(this).prop('checked')) {
                     $("#" + grpnm + "-day_of_week_0").prop('checked', false);
                }
            });

            $("input[id$='-day_of_week_5']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_5", "");
                if ($(this).prop('checked')) {
                     $("#" + grpnm + "-day_of_week_0").prop('checked', false);
                }
            });

            $("input[id$='-day_of_week_6']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_6", "");
                if ($(this).prop('checked')) {
                     $("#" + grpnm + "-day_of_week_0").prop('checked', false);
                }
            });

            $("input[id$='-day_of_week_7']").click(function (event) {
                var grpnm = $(this).attr("id").replace("-day_of_week_7", "");
                if ($(this).prop('checked')) {
                     $("#" + grpnm + "-day_of_week_0").prop('checked', false);
                }
            });

        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <a href="{% url 'site:settings-manage-pharmacy' %}">Back To Pharmacy Management</a>
    <p>&nbsp;</p>
    <form name="pharmacyTimingForm" id="pharmacyTimingForm" method="POST">
        {% csrf_token %}
        {{ timing_form.management_form }}
        <table class="table table-bordered table-striped" style="width: 500px;">
            <thead>
            <tr class="dosis-report-header">
                <th>Cutoff Time</th>
                <th>Resume Time</th>
                <th>Ship Time</th>
                <th>Start Day Shift Time</th>
                <th>Day of Week</th>
                <th>Cycle</th>
                <th>Demand</th>
                <th>Throttle</th>
                <th>Medpass Shift</th>
                <th>Active</th>
                <th>Delete</th>
            </tr>
            </thead>
            <tbody>
            {% for frm in timing_form %}
                <tr>
                    <td style="padding-bottom: 2px;">{{ frm.id }}{{ frm.cutoff_time }}</td>
                    <td style="padding-bottom: 2px;">{{ frm.resume_time }}</td>
                    <td style="padding-bottom: 2px;">{{ frm.ship_time }}</td>
                    <td style="padding-bottom: 2px;">{{ frm.start_day_shift_time }}</td>
                    <td style="padding-bottom: 2px;"><div id="facility-timing-days">{{ frm.day_of_week }}</div></td>
                    <td style="padding-bottom: 2px;">{{ frm.cycle }}</td>
                    <td style="padding-bottom: 2px;">{{ frm.demand }}</td>
                    <td style="padding-bottom: 2px;">{{ frm.throttle }}</td>
                    <td style="padding-bottom: 2px;">{{ frm.medpass_shift }}</td>
                    <td style="padding-bottom: 2px;">{{ frm.active }}</td>
                    {% if timing_form.can_delete %}
                        <td style="padding-bottom: 2px;">{{ frm.DELETE }}</td>
                    {% else %}
                        <td>&nbsp;</td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div>
            <button type="button" name="btn-add-timing" id="btn-add-timing" class="btn">Add Timing</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button name="btn-update-timing" id="btn-update-timing" class="btn">Update Values</button>
        </div>
    </form>
    <div id="add-timing" title="Add Facility Timing" style="margin-left: 2px;">
        <form id="addTimingForm" name="addTimingForm" method="POST">
            {% csrf_token %}
            <input type="hidden" id="add_timing_flag" name="add_timing_flag" value="ADD"/>
            <input type="hidden" name="{{ add_timing_form.active.html_name }}" value="True"/>
            <div class="alert alert-error" id="add-timing-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="add-timing-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">Cutoff Time: {{ add_timing_form.cutoff_time }}</td>
                    <td class="site-drug-edit-td">Resume Time: {{ add_timing_form.resume_time }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Ship Time: {{ add_timing_form.ship_time }}</td>
                    <td class="site-drug-edit-td">Start Day Shift Time: {{ add_timing_form.start_day_shift_time }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">{{ add_timing_form.cycle }} Cycle?</td>
                    <td class="site-drug-edit-td">{{ add_timing_form.demand }} Demand?</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">{{ add_timing_form.throttle }} Throttle?</td>
                    <td class="site-drug-edit-td">{{ add_timing_form.medpass_shift }} Medpass Shift?</td>
                </tr>
                <tr>
                    <td colapsn="2" class="site-drug-edit-td">Day of Week:</td>
                </tr>
                <tr>
                    <td colspan="2" class="site-drug-edit-td"><div id="facility-timing-days">{{ add_timing_form.day_of_week }}</div></td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}