<div class="wrapper wrapper-content">
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="col-lg-12">
                <!-- <div class="ibox-title">
                    <span style="height: 25px;" class="label label-danger "><h5>stockroom</h5></span>
                </div> -->
                <div class="ibox-content">
                    <div class="row">
                        <form autocomplete="off" method="post" id="form_filter" class="form-horizontal">
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="checkbox-inline"><label> <input type="radio" value="all_stock" name="chart_type_stock" checked> <i></i> All Stock Room </label></div>
                                        <div class="checkbox-inline"><label> <input type="radio" value="selected_stock" name="chart_type_stock"> <i></i> Selected Room </label></div>
                                        <input id="ch_type_stock" name="t_ch_type_stock" hidden></input> 
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group" id="fstockroom" hidden>
                                        <label class="col-sm-2 col-sm-offset-1">Stock Room</label>
                                        <div class="input-group col-sm-4">
                                            <input type="text" class="form-control" id="filter_stockroom" name="t_filter_stockroom" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="checkbox-inline"><label> <input type="radio" value="monthtodate" name="chart_type_periode" > <i></i> Month to Date </label></div>
                                        <div class="checkbox-inline"><label> <input type="radio" value="lastmonth" name="chart_type_periode"> <i></i> Last Month </label></div>
                                        <div class="checkbox-inline"><label> <input type="radio" value="yeartodate" name="chart_type_periode"> <i></i> Year to Date </label></div>
                                        <div class="checkbox-inline"><label> <input type="radio" value="lastyear" name="chart_type_periode"> <i></i> Last Year </label></div>
                                        <div class="checkbox-inline"><label> <input type="radio" value="custom" name="chart_type_periode" checked> <i></i> Custom </label></div>
                                        <input id="ch_type_periode" name="t_ch_type_periode" hidden></input> 
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group" id="daterange">
                                        <label class="col-sm-2 col-sm-offset-1">Periode</label> 
                                        <div class="col-sm-6">
                                            <div class="input-daterange input-group col-sm-12" id="datepicker">
                                                <input id="filter_date_start" type="text" class="input-sm form-control" name="t_filter_date_start" value="01<?= date('-m-Y') ?>" />
                                                <span class="input-group-addon">to</span>
                                                <input id="filter_date_end" type="text" class="input-sm form-control" name="t_filter_date_end" value="<?= date('d-m-Y') ?>" />
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <button class="btn btn-success btn-sm browseBtn pull-left" type="button" onclick="loadTable()"><i class="fa fa-search"></i> Browse</button>
                                        </div>
                                    </div>
                                </div>  
                                <!-- <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="col-sm-2 col-sm-offset-0">
                                                <button class="btn btn-success btn-sm browseBtn pull-left" type="button" onclick="loadTable()"><i class="fa fa-search"></i> Browse</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>                           -->
                            </div>
                        </form>                            
                    </div>
                    <div class="row">
                        <div id="resultTable" ></div>
                    </div> 
                </div>
            </div>            
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        loadTable();

        $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
        });

        $("input[name='chart_type_periode']").change(function(){
            chart_type_periode = $("input[type='radio'][name='chart_type_periode']:checked").val();
            $('#ch_type_periode').val(chart_type_periode);
            if (chart_type_periode == 'custom'){
                $('#daterange').show(); 
            } else { $('#daterange').hide(); }
            loadTable();
        });

        $("input[name='chart_type_stock']").change(function(){
            chart_type_stock = $("input[type='radio'][name='chart_type_stock']:checked").val();
            $('#ch_type_stock').val(chart_type_stock);
            if (chart_type_stock == 'selected_stock'){
                $('#fstockroom').show(); 
            } else { 
                $('#fstockroom').hide(); 
                $('#filter_stockroom').val('');
            }
            loadTable();
        });
    });

    function loadTable(){
        var formData = $('#form_filter').serializeArray();
        $.ajax({
            url: site_url + "hauling/stockroom_movement/load_table",
            dataType: "html",
            type: "POST",
            data: formData,
            success: function(result) {
                $('#resultTable').html(result);                
            }
        })
    };

</script>    
