
@extends('layouts.admin')
@section('pageTitle', 'Vega Soft')
@section('page-content')

<input type="hidden" id="table_settings_field" branch_id="" branch_name=""  column_heading="<?= $rows->column_heading;?>" column_width="<?= $rows->column_width;?>" column_alighn="<?= $rows->column_alighn;?>"  column_conversion="<?= $rows->column_conversion;?>" settings_row_id="<?= $id;?>" sp_date_picker="<?= $rows->sp_date_picker;?>"  header_from_date="<?=date('d-m-Y', strtotime('-7 days')); ?>"   header_till_date="<?=date('d-m-Y'); ?>"  sp_sort="<?= $rows->menu_id; ?>"  active_mn="<?= $rows->root;?>"  active_mnt="<?= $rows->menu_type;?>">
<style type="text/css">
  #po_tab td{
    font-size: 0.8rem;
    font-weight: bold;
border: none;
padding: 0.3rem;
  }

 #po_tab  .bord_mid{
  width: 2%;
 }
 #po_tab  .second_td{
    width: 72%;
       font-weight: unset; 
  }
  .pad{
    padding: 0.45rem 2.5rem;
  }
  .load{
    cursor: pointer;
  }
    .load:hover{

    background-color: #e93755;
    font-weight: bold;
  }
 .table  tfoot th{
  margin-bottom: 0px;
 }
 .table  thead th{
background-color: #bff5f6;
 }
 .table  tfoot th{
    padding: 0px;
  }
 .table tbody td{
    padding: 0.5375rem;
  }

.badge{
  cursor: pointer;
}
</style>
<div id="form-div">
<input type="hidden" id="hidden_status" value="0">
<input type="hidden" id="row_id" value="0">


<div class="page-header form-header" >
  <h3 class="page-title text-white"> <?= $rows->menu_name;?> </h3>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
      <!-- 
        <li class="breadcrumb-item text-white  icon-md " aria-current="page"><i class="icon-list slide1"></i> </li> -->
      </ol>
    </nav>
    

    <input type="hidden" id="table_settings_field" branch_id="" branch_name=""  column_heading="<?= $rows->column_heading;?>" column_width="<?= $rows->column_width;?>" column_alighn="<?= $rows->column_alighn;?>"  column_conversion="<?= $rows->column_conversion;?>" settings_row_id="<?= $id;?>" sp_date_picker="<?= $rows->sp_date_picker;?>"  header_from_date="<?=date('d-m-Y', strtotime('-7 days')); ?>"   header_till_date="<?=date('d-m-Y'); ?>"  sp_sort="<?= $rows->menu_id; ?>"   >
    @if ($rows->sedp != "")
  @foreach(explode(',', $rows->sedp) as  $z=>$info) 
     @if ($info == "1" && $z==1)
       <input type="hidden" class="additional_btns" btn_text="Edit" btn_click_function="call_edit_modal" btn_class="btn btn-success btn-sm btn-dtbl" col_width="30" >
     @endif 
     @if ($info == "1" && $z==2)
        <input type="hidden" class="additional_btns" btn_text="Cancel Payment" btn_click_function="call_remove_modal" btn_class="btn btn-danger btn-sm btn-dtbl" col_width="40"  >
     @endif 
     @if ($info == "1" && $z==3)
          <input type="hidden" class="additional_btns" btn_text="Print" btn_click_function="call_print_function2" btn_class="btn btn-info btn-sm btn-dtbl" col_width="40"  >
     @endif
  @endforeach
@endif
</div>
<div class="row quick-action-toolbar">
              <div class="col-md-12 grid-margin">
                <div class="card">
                  <div class="card-header d-block d-md-flex">
                            <div class="row report-inner-cards-wrapper" style="padding-top: 0PX;">
                      <div class=" col-md -6 col-xl report-inner-card">
                         <div class="btn-group" role="group" aria-label="Basic example">
                            <button type="button" class="btn btn-warning btn-icon-text pad active" ids="this_month" id="mon_btn">Month</button><br>
                            <button type="button" class="btn btn-warning btn-icon-text pad" ids="datepicker">Year</button>
                          </div>
                      </div>
                      <div class="col-md-6 col-xl report-inner-card">
                        
                  <input type="text" class="form-control floating mon_yr" id="this_month" >
                   <input type="text" class="form-control mon_yr" name="datepicker" id="datepicker" style="display: none;" value="<?php echo date('Y'); ?>"   />
                      </div> 
                      <div class="col-md-6 col-xl report-inner-card"></div>
                    
                    </div>
                    <p class="ml-auto mb-0"><div class="badge badge-danger p-2 load" onclick="fetch_report()">  <i class="icon-bulb"> Load result</div></i></p>
                  </div>
           
                 <div class="card-body">
                 <div class="col-lg-12 " id="table_div">
                  
                       
                

                 </div>
                 </div>
                </div>
              </div>
            </div>



<input type="hidden" id="serverValue2" value="<?php echo date('Y-m').'-01'; ?>">



<script type="text/javascript">


$(document).ready(function(){


  $('#this_month').MonthPicker({ Button: false , MonthFormat: 'M, yy', AltFormat: 'yy-mm-01', // ODBC time stamp.
        AltField: '#serverValue2',
 OnAfterChooseMonth: function() { 
    
    } 
    });



var dp= $("#datepicker").datepicker({
      format: "yyyy",
      viewMode: "years", 
      minViewMode: "years",
      autoclose:true
   });   
 


 var date = new Date();
//alert(moment(date).format('YYYY-MM')+'-01');
  $('#serverValue2').val(moment(date).format('YYYY-mm')+'-01');
 // alert( $('#serverValue2').val());
  $('#this_month').val(moment(date).format('MMM,YYYY'));
 
 });

$(".pad").on("click", function () {

$(".pad").removeClass("active");

$('.mon_yr').hide();
$(this).addClass("active");
ids=$(this).attr('ids');
$('#'+ids).show();

});
function set_month() { 
  var date = new Date();
//alert(moment(date).format('YYYY-MM')+'-01');
  $('#serverValue2').val(moment(date).format('YYYY-MM')+'-01');
 // alert( $('#serverValue2').val());
  $('#this_month').val(moment(date).format('MMM,YYYY'));

 /* alert( $('#serverValue2').val());*/
       // calc_sal_details();
}



</script>


@endsection

@section('page-script')
<script type="text/javascript">
  
  function fetch_report() {
  if($('#mon_btn').hasClass('active')){
    field_value=$('#serverValue2').val();
    field=1;
  }else{
field_value=$('#datepicker').val();
    field=2;
  }
   arr={
               
               'field': field,
                     'field_value': field_value,
};
console.log(arr);
           $.ajax({
          url: "/get_data",
          type: "POST",
          data:{
             '_token': "{{ csrf_token() }}",
              'row_id':JSON.stringify(arr),
              url1:'fetch_report_all.php'

         
             
          },
          success:function(response){

         po_list=response.edit;  
                            trs='<table   class="table"   id="dynamic_rep_table">';
                      trs+='<colgroup>';
                        trs+='<col width="10px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                        trs+='<col width="30px">';
                      trs+='</colgroup>';
                        trs+='<thead>';
                          trs+='<tr >';
                          trs+='<th class="font-weight-bold" >SL</th>';
                          trs+='<th class="font-weight-bold" style="width:30px !important">Po Number</th>';
                          trs+='<th class="font-weight-bold" >Po Date</th>';
                          trs+='<th class="font-weight-bold" >Amount</th>';
                          trs+='<th class="font-weight-bold" >Est.Completion Date</th>';
                          trs+='<th class="font-weight-bold" >Billed Value</th>';
                          trs+='<th class="font-weight-bold" >Total Expense</th>';
                          trs+='<th class="font-weight-bold" >Paid Amount</th>';
                          trs+='<th class="font-weight-bold" >Balance Amt.</th>';
                          trs+='<th class="font-weight-bold" >Status</th>';
                          trs+='<th class="font-weight-bold" ></th>';
                          trs+='</tr>';
                        trs+='</thead>';
                        trs+='<tfoot style="display: table-header-group;">';
                          trs+='<tr class="table-primary">';
                          trs+='<th></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th><input type="text" placeholder="Search" autocomplete="false"  class="form-control "  /></th>';
                          trs+='<th class="font-weight-bold"></th>';
                          trs+='</tr>';
                        trs+='</tfoot>';
         $(po_list).each(function(i,val) {
  trs+='<tr>';
                          trs+='<td></td>';
                          trs+='<td data-toggle="tooltip" data-placement="top" title="'+val['po_description']+'">'+val['po_no']+'</td>';
                          trs+='<td>'+val['po_date']+'</td>';
                          trs+='<td>'+val['po_amount']+'</td>';
                          trs+='<td>'+val['est_comp_date']+'</td>';
                          trs+='<td>'+val['tot_billd']+'</td>';
                          trs+='<td>'+val['tot_exp']+'</td>';
                          trs+='<td>'+val['tot_paid']+'</td>';
                          trs+='<td>'+(parseFloat(val['tot_billd'])- parseFloat(val['tot_paid'])).toFixed(2)+'</td>';
                          trs+='<td>'+val['po_status']+'</td>';
                          trs+='<td><a href="/History/'+val['pod_a_id']+'"  target="_blank"><label class="badge badge-info">History</label></a><a href="/account_get/'+val['pod_a_id']+'"  target="_blank"><label class="badge badge-success">Accounts</label></a></td>';
                           trs+='</tr>';
         });
         trs+='  </table>';
$("#table_div").html(trs);

load_table();
          },
          error: function(response) {
          }
         });
  }
  function load_table() {
 var table = $('#dynamic_rep_table').DataTable({
        dom: 'lBfrtip',
        'autoWidth':false,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'colvis'
        ],
        "bLengthChange": true,
        "bSort" : true,
         "lengthMenu": [[ 20, 50,75,100, -1], [ 20, 50,75,100, "All"]],
         "pagingType": "full_numbers",
        columnDefs: [ {
            visible: false
        } ]
        
        
    });
     table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                
                that.search( this.value ).draw(); 
                
            }
        } );
    } );
    
    
    
     table.on( 'order.dt search.dt', function () {
        table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();

  // body...
}

</script>
@endsection