{% extends "invoices/base.html" %}
{% load pagination_tags %}
{% load invoice_tags %}
{% load base_filters %}
{% load i18n %}

{% block title %}{{ block.super }}Invoice Search{% endblock %}

{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/jquery-ui/jquery-ui-1.8.2.custom.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}css/timepicker.css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/invoices.css">
    
    <style type="text/css">
        .float-left{
            float: left;
        }
        .clear-left{
            clear: left;
        }
        #id_start_dt, #id_end_dt, #id_start_amount, #id_end_amount {
		    width: 18%;	
		}
        #id_search_criteria, #id_search_text, #id_last_name{
            width: 150px;
        }
        #id_search_method{
            width: 100px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="t">
        <div class="t-invoice">
            <div class="t-search">
                {% invoice_nav  %}
                <h1>{{ SITE_GLOBAL_SITEDISPLAYNAME }} {% trans "Invoice Search" %}</h1>
                {% invoice_search %}
                {% autopaginate invoices 25 %}
                <div class="invoices-wrap">
                    {% if query %}
                    <div style="color: #828282; font-size:0.9em; font-style: italic;">{{ INDEX_UPDATE_NOTE }}</div>
                    {% endif %}
                    {% for invoice in invoices %}
                    {% with invoice|get_object as invoice %}
                        <div class="invoice-row">
                            <div class="invoice-row-inner">
                                {% invoices_search_results_line request invoice %}
                            </div>
                        </div>
                    {% endwith %}   
                    {% empty %}
                        <div>{% trans "0 Results Found" %}</div>
                    {% endfor %}
                </div>
                {% paginate %}
            </div>
        </div>
    </div>

{% endblock %}

{% block extra_body %}
    {{ block.super }}
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.time.picker.js"></script>
    
    <script type="text/javascript">
		$(document).ready(function() {
			//Hide advanced options
			
		    var event_type = $("select#id_invoice_type").val();
		    if(event_type != 'events') {
				$('div.eventFields').hide();
			}
		});
		
        $(".datepicker").live('focus', function() {
            console.log('this', this);
            $(this).datepicker({ dateFormat: 'yy-mm-dd' });
        });
        
        $("select#id_invoice_type").change(function() {
			if($(this).val() == 'events') {
			    $('div.eventFields').show();
			}
			else {
				$('div.eventFields').hide();
			}
		});
    </script>
{% endblock %}
