<form id="formPeriodFilter" action="/inventory" method="get">
<?php
    $filters = $this->filters;
    if (isset($filters['period'])) unset($filters['period']);
    $filters['page'] = 0;
    foreach ($filters as $name => $value) {
    ?>
        <input type="hidden" name="f[<?php echo $name ?>]" value="<?php echo $value ?>"/>
    <?php } ?>
        <select id="periodSelect" name="f[period]" class="form-control">
    <?php foreach ($this->intervals as $index => $value): ?>
        <option value="<?php echo $index ?>" <?php if ($index == $this->filters['period']) echo "selected" ?> ><?php echo $value ?></option>
    <?php endforeach;?>
    </select>
    <div id="periodDatePicker" style="display:none;padding: 3px 0;">
        <div class="row">
            <div class="col-xs-6">
                <span class="smalltext">from&nbsp;&nbsp;</span>        
                <input id="from_date" class="form-control" name="f[from_date]" size="10" maxlength="10" value="<?=$this->filters['from_date'] ?>">
            </div>
            <div class="col-xs-6">
                <span class="smalltext">&nbsp;&nbsp;to&nbsp;&nbsp;</span>
                 <input id="to_date" class="form-control" name="f[to_date]" size="10" maxlength="10" value="<?=$this->filters['to_date'] ?>">
            </div>
        </div>
    </div>
    <div id="filterErrorMessage" style="display:hidden"></div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $("#formPeriodFilter").submit(function() {
            return submitAction();
        });
        $("#periodSelect").change(function(e) {
            if ($(this).val() != 6) {
                $("#periodDatePicker:visible").slideUp();
            }
            $("#formPeriodFilter").submit();
        });
    <?php if ($this->filters['period'] == 6) { // custom ?>
	displayDateRange()
	<?php } ?>
    });

    function selectDate() {
        $('#filterErrorMessage').slideUp();
        $("#formPeriodFilter").submit();
    }

    function submitAction() {
        var valid = true;
        var re = new RegExp(/^\d{4}-\d{1,2}-\d{1,2}$/);
        if (!$('#from_date').val().match(re)) {
            showDateRangeError('Invalid date range.');
            valid = false;
        }
        if (!$('#to_date').val().match(re)) {
            showDateRangeError('Invalid date range.');
            valid = false;
        }
        if ($('#from_date').val().match(re) && $('#to_date').val().match(re)) {
            var tmp_from_date = $('#from_date').val().split("-");
            var tmp_to_date = $('#to_date').val().split("-");
            var to_date = new Date(tmp_to_date[0], tmp_to_date[1] - 1, tmp_to_date[2]);
            var from_date = new Date(tmp_from_date[0], tmp_from_date[1] - 1, tmp_from_date[2]);
            if (to_date - from_date < 0) {
                showDateRangeError('Invalid date range.');
                valid = false;
            }
        }
        return valid;
    }

    function showDateRangeError(text) {
        $('#filterErrorMessage').html('Invalid date range.').slideDown();
    }

    function displayDateRange() {
        $('#from_date').datepicker({
            dateFormat: 'yy-mm-dd',
            showOn: 'both',
            buttonImage: '/images/icoCalendar.gif',
            buttonImageOnly: true,
            minDate: -14915,
            maxDate: '-1D'
        });
        $('#to_date').datepicker({
            dateFormat: 'yy-mm-dd',
            showOn: 'both',
            buttonImage: '/images/icoCalendar.gif',
            buttonImageOnly: true,
            minDate: -14915,
            maxDate: '-1D'
        });
        $('#from_date, #to_date').change(function() {
            selectDate();
        });
        $("#periodDatePicker").slideDown();
    }
</script>