<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>@yield('pageTitle')</title>
      <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="{{ asset('admin/simple-line-icons/css/simple-line-icons.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/flag-icon-css/css/flag-icon.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/css/vendor.bundle.base.css') }}">
   

    <link rel="stylesheet" href="{{ asset('admin/admintheme/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/vega_css.css') }}">
    <link rel="shortcut icon" href="{ asset('admin/admintheme/images/favicon.png') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('date_picker/jquery.datetimepicker.css') }}"/>
    
    <link rel="stylesheet" href="{{ asset('admin/admintheme/css/tree.css') }}">
    <link rel="stylesheet" href="{{ asset('css/jqury_min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/MonthPicker.min.css') }}">
      <link href="{{ asset('css/datepicker.min.css') }}" rel="stylesheet">

    <script src="{{ asset('js/jquery-3.6.3.min.js') }}" ></script>
    <script src="{{ asset('js/jquery.slimscroll.min.js') }}" ></script>



<!-- jQuery and jQuery UI -->




    <script src="{{ asset('js/tree.js') }}" ></script>

       <script src="{{ asset('js/vega_scripts.js') }}" ></script>

       <link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> -->


<style>
 .table  tfoot th{
  margin-bottom: 0px;
 }
 .table  thead th{
background-color: #bff5f6;
 }
 .table  tfoot th{
    padding: 0px;
  }
 .table tbody td{
    padding: 0.5375rem;
  }

.table-autocomplete thead{

 background: aquamarine;


}
.table-autocomplete {
  width: 100%;
  font-size: 15px;
}
.ui-menu-item:hover{
color:white;
background:black;
}
.ui-menu .ui-menu-item-wrapper:hover {
        color: #303030;
        background-color: red;
        border: #fff 1px solid;
    }   


    .ui-state-focus{
      color: #303030;
        background-color: red;
        border: #fff 1px solid;
    }
    .report-inner-cards-wrapper .report-inner-card{
      display: block;
    }

</style>


  </head>
  <body>


    <div class="container-scroller">
      <!-- partial:../../partials/_navbar.html -->
      <nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">

<div class="col-lg-12 col-sm-12 col-12" >


<div class="row">

<!-- <div class="col-lg-4 col-sm-4 col-4">
<a class="" href="/home">
<img src="{{ URL('images/rahul_bannerN.png') }}" alt="logo" class="logo-dark" style="height:80%;"/></a>


</div> -->


<div  class="col-lg-12 col-sm-12 col-ms-12 col-12" style="background-image:url({{ asset('images/Logo_Long.png') }});height:75px;background-size: 3000px 100px;
background-repeat: no-repeat;">

<div class="navbar-menu-wrapper d-flex align-items-right flex-grow-1" style="height:80%;padding: 0px;width: 100%;">


    <ul class="navbar-nav navbar-nav-right ml-auto" >

      <li class="nav-item dropdown d-none d-xl-inline-flex user-dropdown" style="align-items: end;">
        <a class="nav-link dropdown-toggle" id="UserDropdown" href="/" data-toggle="dropdown" aria-expanded="false">
          <img class="img-xs rounded-circle ml-2" src="{{ asset('admin/admintheme/images/user-icon.png') }}" alt="Profile image"> <span class="font-weight-normal"> 
          {{ Session::get('uname') }}
          </span></a>
        <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
          
        
          <a class="dropdown-item"><i class="dropdown-item-icon icon-energy text-primary"></i> Change Password</a>
          
          <a class="dropdown-item" href="{{ route('logout') }}"
                                 onclick="event.preventDefault();
                                               document.getElementById('logout-form').submit();"><i class="dropdown-item-icon icon-power text-primary"></i>Sign Out
                                               <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none"  enctype="multipart/form-data">
                                  @csrf
                              </form>
                                             </a>
        </div>
      </li>
    </ul>
    <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
      <span class="icon-menu"></span>
    </button>
  </div>
</div>


</div>

</div>
  



 
</nav>



      <!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:../../partials/_sidebar.html -->
        <!-- <nav class="sidebar sidebar-offcanvas" data-bs-scroll="true" id="sidebar">

        </nav> -->
        <!-- partial -->
        <div class="main-panel" style="width:100%;">
          <div class="content-wrapper">
             <div class="content-wrapper">
           
            <div class="row">
             
              <div class="col-lg-12 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="d-sm-flex align-items-baseline report-summary-header">
                          <h5 class="font-weight-semibold">PO Number:  <span class="text-danger">{{ $po_detail->po_no }}</span>/ Po CO No: <span class="text-info">{{ $po_detail->po_con_no }}</span></h5><!-- <span class="ml-auto"> Updated Report</span> <button class="btn btn-icons border-0 p-2"><i class="icon-refresh"></i> --></button>
                        </div>
                      </div>
                    </div>
                    <div class="row report-inner-cards-wrapper">
                      <div class=" col-md -6 col-xl report-inner-card">
                        <div class="inner-card-text">
                          <span class="report-title text-primary">P.o Amount</span>
                          <h4>{{ $po_detail->po_amount }}</h4>
                        
                        </div>
                       
                      </div>
                      <div class="col-md-6 col-xl report-inner-card">
                        <div class="inner-card-text">
                          <span class="report-title text-danger">Exp. Completion Date</span>
                          <h4>{{ $po_detail->est_comp_date }}</h4>
                         
                        </div>
                      </div>
                      <div class="col-md-6 col-xl report-inner-card">
                        <div class="inner-card-text">
                          <span class="report-title text-success">Completion Date</span>
                          <h4> {{ $po_detail->actual_cmp_dt }}</h4>
                        </div>
                      </div>
                      <div class="col-md-6 col-xl report-inner-card">
                        <div class="inner-card-text">
                          <span class="report-title text-info">Act.  Completion Amount</span>
                          <h4> {{ $po_detail->actual_cmp_amt }}</h4>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-12 " id="table_div">
                  
                       <table   class="table"   id="dynamic_rep_table">
                      <colgroup>
                        <col width="10px">
                        <col width="30px">
                        <col width="30px">
                        <col width="30px">
                        <col width="30px">
                        <col width="30px">
                        <col width="30px">
                        <col width="30px">
                        <col width="30px">
                        <col width="30px">
                      </colgroup>
                        <thead>
                          <tr >
                          <th class="font-weight-bold" >SL</th>
                          <th class="font-weight-bold" style="width:30px !important">Date</th>
                          <th class="font-weight-bold" >Client Billed</th>
                          <th class="font-weight-bold" >Client Collected</th>
                          <th class="font-weight-bold" >Supplier Billed</th>
                          <th class="font-weight-bold" >Paid To Supplier</th>
                          <th class="font-weight-bold" >Contarctor Billed</th>
                          <th class="font-weight-bold" >Paid To Contartcor</th>
                          <th class="font-weight-bold" >Labour Paid</th>
                          <th class="font-weight-bold" >Total Paid</th>
                          </tr>
                        </thead>
                       <?php 
                       $billd_ioc=0;
                       $paid_ioc=0;
                       $sup_billd=0;
                       $sup_paid=0;
                       $con_paid=0;
                       $con_billd=0;
                       $lab_paid=0;
                       $total=0;
                       ?>
       @if (sizeof($data)>0)
       @foreach ($data as $ind =>$content)
  <tr>
          <?php        $billd_ioc+=$content['tot_billd_ioc'];
                       $paid_ioc+=$content['tot_paid_ioc'];
                       $sup_billd+=$content['sup_billd'];
                       $sup_paid+=$content['sup_paid'];
                       $con_billd+=$content['con_billd'];
                       $con_paid+=$content['con_paid'];
                       $lab_paid+=$content['lab_paid'];
                       $total+=$content['total'];
                       ?>
                          <td><?php echo ($ind+1); ?></td>                          
                          <td><?php echo $content['t_date']; ?></td>
                          <td class="text-right"><?php echo $content['tot_billd_ioc']; ?></td>
                          <td class="text-right"><?php echo $content['tot_paid_ioc']; ?></td>
                          <td class="text-right"><?php echo $content['sup_billd']; ?></td>
                          <td class="text-right"><?php echo $content['sup_paid']; ?></td>
                          <td class="text-right"><?php echo $content['con_billd']; ?></td>
                          <td class="text-right"><?php echo $content['con_paid']; ?></td>
                          <td class="text-right"><?php echo $content['lab_paid']; ?></td>
                          <td class="text-right"><?php echo $content['total']; ?></td>
                          
                           </tr>
            @endforeach
            
            <tr class="text-light bg-dark">
               <td class="font-weight-bold"></td>                          
                          <td class="font-weight-bold text-right">TOTAL</td>
                          <td class="font-weight-bold text-right"><?php echo $billd_ioc; ?></td>
                          <td class="font-weight-bold text-right"><?php echo $paid_ioc; ?></td>
                          <td class="font-weight-bold text-right"><?php echo $sup_billd; ?></td>
                          <td class="font-weight-bold text-right"><?php echo $sup_paid; ?></td>
                          <td class="font-weight-bold text-right"><?php echo $con_billd; ?></td>
                          <td class="font-weight-bold text-right"><?php echo $con_paid; ?></td>
                          <td class="font-weight-bold text-right"><?php echo $lab_paid; ?></td>
                          <td class="font-weight-bold text-right"><?php echo $total; ?></td>
            </tr> 
            @endif

           </table>
                

                 </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-12 grid-margin stretch-card"></div>
              <div class="col-lg-12 grid-margin stretch-card"></div>
              <div class="col-lg-12 stretch-card grid-margin"></div>
            </div>
          </div>
          </div>
          

          <div   tabindex="-1" id="myModaltable" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" >
    
      <!-- Modal content-->
      <div class="modal-content" style="height:auto !important;">
        <div class="modal-header">         
          <h4 class="modal-title">Table Settings <?php //echo $formid; ?></h4>
         <button aria-hidden="true" data-dismiss="modal" class="btn-close" type="button"></button>
        </div>
        <div class="modal-body">
        
   
        <form  method="post" autocomplete="off" action="/save_table_settings" class="modal_form" enctype="multipart/form-data"  role="form"  autocomplete="off" >
        
    

</form>
       
        </div>
        <div class="modal-footer" style="border-top:none !important;">
      
        </div>
      </div>
      
    </div>
  </div>
          <!-- content-wrapper ends -->
          <!-- partial:../../partials/_footer.html -->
          <footer class="footer">
            <div class="d-sm-flex justify-content-center justify-content-sm-between">
              <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © vega bussiness softwere 2022</span>
             
            </div>
          </footer>
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>








      
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="{{ asset('admin/js/vendor.bundle.base.js') }}"></script>
    <!-- endinject -->
    <!-- Plugin js for this page -->
    <!-- End plugin js for this page -->
    <!-- inject:js -->
   <script src="{{ asset('js/moment.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script> 
    <script src="{{ asset('admin/admintheme/js/off-canvas.js') }}"></script>
    <script src="{{ asset('admin/admintheme/js/misc.js') }}"></script>
    <script src="{{ asset('project-js/vega-scripts.js') }}"></script>
    <script src="{{ asset('date_picker/jquery.js') }}" ></script>
    <script src="{{ asset('date_picker/jquery.datetimepicker.full.js') }}" ></script>

    <script src="{{ asset('datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('datatables/dataTables.bootstrap4.min.js')}}"></script>
<!-- Buttons examples -->
<script src="{{ asset('datatables/dataTables.buttons.min.js')}}"></script>
<script src="{{ asset('datatables/buttons.bootstrap4.min.js')}}"></script>
<script src="{{ asset('datatables/jszip.min.js')}}"></script>
<script src="{{ asset('datatables/pdfmake.min.js')}}"></script>
<script src="{{ asset('datatables/vfs_fonts.js')}}"></script>
<script src="{{ asset('datatables/buttons.html5.min.js')}}"></script>
<script src="{{ asset('datatables/buttons.print.min.js')}}"></script>
<script src="{{ asset('datatables/buttons.colVis.min.js')}}"></script>
<!-- Responsive examples -->
<script src="{{ asset('datatables/dataTables.responsive.min.js')}}"></script>
<script src="{{ asset('datatables/responsive.bootstrap4.min.js')}}"></script>

<script src="{{ asset('js/select2.min.js') }}" ></script>
<script src="{{ asset('js/jquery.ui.min.js') }}" ></script>

<script src="{{ asset('js/MonthPicker.min.js') }}" ></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>





<!-- <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 -->

    
<!--   <script src="//cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
 --> 
  
    <!-- endinject -->
    <!-- Custom js for this page -->
    <!-- End custom js for this page -->






<script>






 var table = $('#dynamic_rep_table').DataTable({
        dom: 'lBfrtip',
        'autoWidth':false,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'colvis'
        ],
        "ordering": false,
        "searching": false,
        "bLengthChange": true,
        "bPaginate": false,
        "bSort" : true,
        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(); 
                
            }
        } );
    } );
    
    
    



</script>

  </body>
</html>

