@extends('adminlayout.admin')

@section('content')
 
<style >
  section .due_sec{
   margin: 10px 0px 10px 15px;
   
 }
 div .due_content{
   display: inline-block;
   border-radius: 10px;
   padding: 10px 15px 10px 15px;
 }
 div .due_warning{
  background-color: #bcfbaf;
}
div .due_success{
  background-color:#f9e1c0 ;
}
div  .due_primary{
  background-color: #b9e5f0;
}
</style>

<!-- Content Wrapper Start -->
<div class="content-wrapper">

  <!-- Content Header Start -->
  <section class="content-header" style="float:right; ">
   
  <a class="btn btn-lg btn-warning" href="{{route('add_expence')}}">
    <i class="fa fa-fw fa-plus"></i>
    Add Expences
  </a>    
</section>
  <!-- Content Header end -->
<br><br>
  <!-- Content Start -->
  <!-- Content Start -->
  <section class="content">

    <div class="box box-info collapsed-box">
    <div class="box-header with-border">
      <h3 class="box-title">
         From :         </h3>
        <input type="date" name="from"> 
        <h3 class="box-title"> to</h3>
         <input type="date" name="from">

          <label>
              <select name="supplier-supplier-list_length" aria-controls="supplier-supplier-list" class="form-control input-sm">
                <option value="all">All</option>
                <option value="25">Smgeo auto pvt</option>
                <option value="50">spvaig </option>
                <option value="100">df</option>
                <option value="200">sddd</option>
                <option value="-1">All</option>
              </select> </label>
         <button><i class="fa fa-fw fa-search"></i></button>
      </div>

     <!-- <div class="row">

        <section class="content-header due_sec">
         <div class="due_content due_warning" href="#">

          Paid
          <h4>7900.00</h4>
        </div>
        <div class="due_content due_icon" href="#">
          <i class="fa fa-fw fa-plus"></i>

        </div>
        <div class="due_content due_success" href="#">
          Unpaid
          <h4>7900.00</h4>
        </div> 
        <div class="due_content due_icon" href="#">
          =

        </div>
        <div class="due_content due_primary" href="#">

         Total amt.
         <h4>7900.00</h4>
       </div>    
     </section>
   </div>-->


 </div> 
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-success">
          <div class="box-header">
            <h3 class="box-title">
              Customer Sale Report  </h3>
          </div>
          <div class="box-body">
            <div class="table-responsive">                  
              <div id="supplier-supplier-list_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">          
              <table id="example1" class="table table-bordered table-striped table-hover dataTable" data-hide-colums="" role="grid" aria-describedby="supplier-supplier-list_info" style="width: 1197px;">
                <thead>
                  <tr class="bg-gray" role="row">
                    <th>SN</th>
                    <th>Expence Name</th>
                    <th>QTY</th>
                    <th>PRICE/UNIT</th>                    
                    <th>GST</th>
                    <th>AMOUNT</th>
                    <th>REMARK</th>
                        <th class="w-5 text-center sorting_disabled" rowspan="1" colspan="1" style="width: 53px;" aria-label="
                        Purchase                    ">
                         DATE                    </th>
                      <th class="w-5 text-center">
                      <i class="fa fa-trash-o"></i>
                    </th>
                    </tr>
                </thead>
                
              <tbody>
			   @php 
				$i=1;
				@endphp
				@foreach($expences as $data)
                <tr id="row_1" role="row" class="odd">
                  <td class="text-center sorting_1" >{{$i++}}</td>
                        <td >{{$data->name}}</td>
                        <td >{{$data->qty}}</td>
                        <td >₹ {{number_format($data->price,2)}}</td>                  
                         <td >₹ {{ number_format($data->gst_amount,2)}}</td>                  
                        
                        <td class=" text-center" >₹ {{number_format($data->total_price,2)}}</td>
                        <td class=" text-center" ><textarea type="text" readonly>{{$data->remark}}</textarea></td>
                        <td class=" text-center" >{{ date('d M Y', strtotime($data->created_at))}}</td>
                       
                       <td> 
                       <div class="btn-group">
                         <a href="#" class="btn btn-default btn-info buttons-html5"type="button" title="Copy"><span><i class="fa fa-fw fa-pencil"></i></span></a>
  
                         </div>

                      </td>
                     </tr>
				  @endforeach	 
                 </tbody> 
             </table>
             
             </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Content End -->
</div>
<!-- Content Wrapper End -->
  
 

@endsection

<style>
      * {
        box-sizing: border-box;
      }

      
      .h4-14 h4 {
        font-size: 12px;
        margin-top: 0;
        margin-bottom: 5px;
      }
      .img {
        margin-left: "auto";
        margin-top: "auto";
        height: 30px;
      }
      pre,
      p {
        /* width: 99%; */
        /* overflow: auto; */
        /* bpicklist: 1px solid #aaa; */
        padding: 0;
        margin: 0;
      }
      table {
        font-family: arial, sans-serif;
        width: 100%;
        border-collapse: collapse;
        padding: 1px;
      }
      .hm-p p {
        text-align: left;
        padding: 1px;
        padding: 5px 4px;
      }
      td,
      th {
        text-align: left;
        padding: 8px 6px;
      }
      .table-b td,
      .table-b th {
        border: 1px solid #ddd;
      }
      th {
        /* background-color: #ddd; */
      }
      .hm-p td,
      .hm-p th {
        padding: 3px 0px;
      }
      .cropped {
        float: right;
        margin-bottom: 20px;
        height: 100px; /* height of container */
        overflow: hidden;
      }
      .cropped img {
        width: 400px;
        margin: 8px 0px 0px 80px;
      }
      .main-pd-wrapper {
        box-shadow: 0 0 10px #ddd;
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
      }
      .table-bordered td,
      .table-bordered th {
        border: 1px solid #ddd;
        padding: 10px;
        font-size: 14px;
      }
    </style>