\!/ KyuuKazami \!/

<div class="col-md-12">
    <form class="form-horizontal" method="get" action="<?php echo $action_url ?>" >
        <div class="form-group">
            <div class="col-xs-12 col-sm-6 col-md-2 col-lg-1">
                <input type="text" placeholder="Order ID" class="form-control" name="order_id" value="<?php echo $order_id; ?>" />
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2 col-lg-1">
                <input type="text" placeholder="Item Code" class="form-control" name="sku" value="<?php echo $search_sku; ?>" />
            </div>
            <div class="col-xs-12 col-sm-6 col-md-2 col-lg-1">
                <input type="text" placeholder="Size" class="form-control" name="size" value="<?php echo $search_size; ?>" />
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                <button id="order_range_picker" class="btn btn-default btn-block" name="order_date_range">
                    <i class="fa fa-calendar"></i> 
                    <span><?php echo $start_date?> - <?php echo $end_date ?></span> <b class="caret"></b>
                </button>
                <input value="<?php echo $start_date?> - <?php echo $end_date ?>" type="hidden" id="hid_order_range_picker" class="form-control" for="order_range_picker" name="order_range_picker">
            </div>                                    
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
                <?php echo $this->common_lib->render_dropdown($order_status_list,"status_code","status_detail","order_status",$order_status); ?>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <label><input type="checkbox" value="1" name="detail_report" <?php if($detail_report == 1) { echo 'checked=""'; }?> /> Show report in detail</label>                
            </div>            
        </div>
        <div class="form-group col-xs-12">
            <input class="btn btn-primary" type="submit" value="Search" name="cmdSearchOrder" />
            <input class="btn btn-danger" type="button" value="Clear Filter" name="cmdClearFilter" />
        </div>
    </form>
    <script type="text/javascript">
        $(function(){
            $("input[name=cmdClearFilter]").click(function(){
                window.location.href = "<?php echo $action_url ?>";
            });                                    

            $('#order_range_picker').daterangepicker(
                {
                    ranges: {
                       'Today': [moment(), moment()],
                       'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                       'Last 7 Days': [moment().subtract('days', 6), moment()],
                       'Last 30 Days': [moment().subtract('days', 29), moment()],
                       'This Month': [moment().startOf('month'), moment().endOf('month')],
                       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')],
                       'This Year': [moment().startOf('year'), moment().endOf('month')],
                       'Last Year': [moment().subtract('year', 1).startOf('year'), moment().subtract('year', 1).endOf('year')]
                    },
                  opens: 'left',
                  startDate: moment().subtract('days', 29),
                  endDate: moment()
                },
                function(start, end) {
                    $('#order_range_picker span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    $('#hid_order_range_picker').val(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                }   
            );
        });
    </script>
</div>