<style>
    .issued-details {
        display: none;
    }
</style>
<aside class="right-side">
    <section class="content-header">
        <div class="title_bar">
            <h1 class="major_txt_color"><?php echo $title;?></h1>
            <div class="breadcrumb_container"><?php echo breadcrumb_links();?></div>
        </div>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <!-- /.box -->
                <div class="box box-primary">
                    <div class="box-body table-responsive">
                        <form name="get_data_search" action="<?php echo $form_action;?>" method="post" class="search_form validate_form">
                            <input type="hidden" name="hidden_id" class="hidden_id" value="<?php echo (!empty($hidden_id)) ? $hidden_id : '';?>" />
                        
                            <!-- Filtered Columns to send JS - Start -->
                            <input type="hidden" name="hidden_print" class="hidden_print" value="<?php echo (!empty($start_date)) ? 1 : 0 ;?>" />
                            <?php foreach($filters as $key=>$val) : ?>
                                <input type="hidden" name="hidden_filter_array[]" class="hidden_filter_array" value="<?php echo $val;?>" />
                            <?php endforeach;?>
                            <!-- Filtered Columns to send JS - End -->
                            
                            <div class="col-xs-12">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label >Item</label>
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-soccer-ball-o"></i>
                                            </div>
                                        
                                            <select name="item_id" class="form-control select2">
                                                <option value="">-- Select Item --</option>
                                                <?php 
                                                    foreach( $inv_items as $k => $inv_item ) :
                                                        ?>
                                                            <option value="<?php echo $inv_item['id']; ?>" <?php echo $item_id == $inv_item['id'] ? 'selected' : ''; ?> ><?php echo $inv_item['item_name']; ?></option>
                                                        <?php
                                                    endforeach;
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label >Type</label>
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-soccer-ball-o"></i>
                                            </div>
                                        
                                            <select name="date_type" class="form-control select2">
                                                <option value="1" <?php echo $date_type == "1" ? 'selected' : ''; ?> >By Purchased Date</option>
                                                <option value="2" <?php echo $date_type == "2" ? 'selected' : ''; ?> >By Issued Date</option>
                                            </select>
                                        </div>    
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label >Start Date</label>
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="start_date" placeholder="DD-MM-YYYY" style="padding: 6px 12px;margin-right:5%;width:100%;" id="start_date" name="start_date" value="<?php echo !empty( $start_date ) ? $start_date : '';?>" autocomplete="off" >
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label >End Date</label>
                                        <div class="input-group">
                                            
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="end_date" placeholder="DD-MM-YYYY" style="padding: 6px 12px;margin-right:5%;width:100%;"  id="end_date" name="end_date" value="<?php echo !empty( $end_date ) ? $end_date : date("d-m-Y"); ?>" autocomplete="off" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="col-md-5">&nbsp;</div>
                                <div class="col-md-4">
                                    <input type="submit" value="Get Data" name="submit" class="btn btn-danger btn-sm" style="background-color: #e33739;
    border-color: #e33739;" />&nbsp;&nbsp;
                                
                                    <input type="submit" value="Print Data" name="submit" class="btn btn-primary btn-sm" />
                                </div>
                                <div class="col-md-2">&nbsp;</div>
                            </div>
                            
                            <!-- Filtered Columns to send JS - Start -->
                            <div class="col-xs-12" style="margin-bottom:4%;">
                                <div class="col-xs-12 blck" style="margin-bottom: -35px;">
                                    <div class="sub-title" style="color:#0B45B3; background:#f3f3f3 !important;" ><h4><i class="fa fa-fire" style="font-size: 14px;"></i> Filter Columns</h4><i class="ctrl opener opened fa fa-chevron-up" style="float: right; margin-top: -25px;"></i></div>
                                    <div class="blck-content col-xs-12" style="border-bottom: 1px inset rgba(209, 216, 216, 0.6); background: rgba(3, 12, 11, 0.05); margin-top: -15px;">
                                        <div id="grpChkBox" class="grpChkBox">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Filtered Columns to send JS - End -->
                            
                        </form>
                    </div>
                    <div class="box-body table-responsive">
                       <table class="table table-bordered table-striped data_table filterTable" id="filterTable">
                            <thead>
                                <tr>
                                    <th width="5%" class="align-center">S.No</th>
                                    <th class="align-center">Date</th>
                                    <th class="align-center">Item Name</th>
                                    <th class="align-center">Available Quantity</th>
                                    <th class="align-center">Issued Quantity</th>
                                    <th class="align-center">Cost Price</th>
                                    <th class="align-center">Sale price</th>
                                    
                                    <th class="align-center">Counter</th>
                                    <th class="align-center">Sanctum</th>
                                    <th class="align-center">Kitchen</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php 
                                    $i = 0;
                                    foreach( $results as $k => $row ) :
                                        /*$date_clm = $date_type == 1 ? 'purchased_date' : 'issued_date';
                                        $date_clm = !empty( $row[$date_clm] ) ? $date_clm : 'purchased_date';*/
                                    ?>
                                        <tr class="issued-row">
                                            <td class="align-center"><?php echo ++$i; ?></td>
                                            <td><?php echo date( 'd-m-Y',strtotime( $row['date'] ) );?></td>
                                            <td><?php echo $row['item_name'];?></td>
                                            <td class="align-center"><?php echo $row['total_avail_qty']; ?></td>
                                            <td class="align-center"><?php echo !empty( $row['tot_issued_qty'] ) ? $row['tot_issued_qty'] : 0; ?></td>
                                            <td class="align-right"><?php echo !empty( $row['cost_price'] ) ? $row['cost_price'] : '0.00'; ?></td>
                                            <td class="align-right"><?php echo !empty( $row['selling_price'] ) ? $row['selling_price'] : '0.00'; ?></td>

                                            <td class="align-right"><?php echo text( $row['usage_1'] ); ?></td>
                                            <td class="align-right"><?php echo text( $row['usage_2'] ); ?></td>
                                            <td class="align-right"><?php echo text( $row['usage_3'] ); ?></td>
                                        </tr>

                                    <?php
                                    endforeach; 
                                ?>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div>
        </div>
    </section><!-- /.content -->
</aside><!-- /.right-side -->
<!-- ./wrapper -->

<script type="text/javascript">
    $(document).ready(function() {
        $('.start_date').bootstrapMaterialDatePicker({ 
            time: false, 
            format: 'DD-MM-YYYY'
        }). on('change', function(e, date) {
            if($('.end_date').val() != '') {
                $('.end_date').val('');
                var cur_date = new Date(date);
                $('.end_date').val(getTwoDigits(cur_date.getDate()) + '-'+ getTwoDigits((cur_date.getMonth() + 1)) + '-'+ cur_date.getFullYear());
                change_todate(getTwoDigits(cur_date.getDate()) + '-'+ getTwoDigits((cur_date.getMonth() + 1)) + '-'+ cur_date.getFullYear());
            }
        });
        
        $('.end_date').bootstrapMaterialDatePicker({ 
            time: false, 
            format: 'DD-MM-YYYY'
        });
        
        var date = $('.start_date').val();
        if( date != '' ) {
            change_todate(date);
        }
        
        
        $('.issued-row').on('click', function(){
            var dataUsage = $(this).attr('data-usage') || "";
            if( dataUsage != '' ) {
                var html = '<div class="">';
            }
            
            
            var $issuedDetails = $(this).next('.issued-details');
            $('.issued-details').not($issuedDetails).slideUp('slow', function(){
                $issuedDetails.slideDown('slow');
            });
            
        });
        
    });
   
    function change_todate(date) {
       $('.end_date').bootstrapMaterialDatePicker('setMinDate', date);
    }
</script>