{% load vmo_tags %}

{% if error_tag %}
    <div class="modal-header">
        <h4 class="modal-title" style="text-align:center;">Time Sheet for {{ month_year }}</h4>
    </div>

    <div class="modal-body" id="id_div_timesheet_modal_body_error">
        <h3 style="color:red;text-align:center">{{ message }}</h3>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-default" onclick="timesheet_modal_close();">Close</button>
    </div>

{% else %}
    <div class="modal-header">
        <div class="col-sm-3 pull-right">
          <button type="button" class="btn btn-primary col-sm-6" style="padding-left:7%;"
                  onclick="export_timesheet({{ contractor_id }}, {{ month }}, {{ year }})" id="id_btn_timesheet_import">
              Export
          </button>
          <button type="button" class="btn btn-primary pull-right" id="id_btn_timesheet_edit"
                  onclick="disable_readonly();">
              Edit
          </button>
        </div>
      <h4 class="modal-title" style="text-align:center;" id="id_timesheet_title">Time Sheet for {{ month_year }}</h4>
    </div>
    <div class="modal-body" id="id_div_timesheet_modal_body">
        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-4">
                    <label>Contractor Name : </label>
                </div>
                <div class="col-sm-8">
                        {{ name }}
                </div>
            </div>

            <div class="col-sm-12">
                <div class="col-sm-4">
                    <label>Vendor Name : </label>
                </div>
                <div class="col-sm-8">
                        {{ vendor_name }}
                </div>
            </div>

            <div class="col-sm-12">
                <div class="col-sm-3">
                    <label>Start Date : </label>
                </div>
                <div class="col-sm-3">
                        {{ month_start_date }}
                </div>
                <div class="col-sm-3">
                    <label>End Date : </label>
                </div>
                <div class="col-sm-3">
                        {{ month_end_date }}
                </div>
            </div>

            <div class="col-sm-12">
                <div class="col-sm-3">
                    <label>PO# : </label>
                </div>
                <div class="col-sm-3">
                        {{ contractor.po.po_number }}
                </div>
                <div class="col-sm-3">
                    <label>PO Valid Till : </label>
                </div>
                <div class="col-sm-3">
                        {{ contractor.po.end_date|date:'d-b-Y' }}
                </div>
            </div>

            <div class="box-body">
                <table id="id_table_history_dashboard" class="table table-bordered table-striped" style="width:100%;">
                    <thead>
                    <tr>
                        <th>Date</th>
                        <th>In Time</th>
                        <th>Out Time</th>
                        <th>Total Time</th>
                        <th>Remarks</th>
                    </tr>
                    </thead>
                    <tbody id="id_tbody_time_details">
                        {% for data in result_lst %}
                            <tr>
                                <td>{{ data.0 }} </td>
                                <td>{{ data.1 }}</td>
                                <td>{{ data.2 }}</td>
                                {% if data.3 == "NA" %}
                                    <td>NA</td>
                                {% elif data.3 %}
                                    <td><a onclick="get_logged_in_history_details({{ data.5 }});" style="cursor: pointer;">
                                        {{ data.3|get_hours }}</a>
                                    </td>
                                {% else %}
                                    <td></td>
                                {% endif %}
                                <td><input type="text" name="timesheet_remarks" value="{{ data.4 }}" readonly></td>
                            </tr>
                        {% endfor %}
                        <tr>
                            <td colspan="3"> Total </td>
                            <td>{{ timesheet_data.total_time|get_hours }}</td>
                            <td>{{ worked_days }}/{{ month|get_working_days:year }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
    <div class="modal-footer">
      <button type="button" onclick="timesheet_edit({{ contractor_id }}, {{ month }}, {{ year }});"
              class="btn btn-default" style="display:none;" id="id_btn_save">Save</button>
      <button type="button" class="btn btn-default" onclick="timesheet_modal_close();">Close</button>
    </div>
{% endif %}

<script>
    function get_logged_in_history_details(ids)
    {
        $.ajax({
                url : "/get_logged_in_history_details/",
                type : "POST",
                dataType : "json",
                async: false,
                data : {
                    history_id: ids,
                },
                success : function(data)
                {
                    $("#id_modal_content_logged_history").html(data.response);
                    $("#id_modal_logged_history").modal("show");
                },

        });
    }

    function disable_readonly()
    {
        $('[name=timesheet_remarks]').attr("readonly", false);
        $("#id_btn_save").show();
    }
</script>