@extends('adminlte::page')
@section('content')
<?php Fun::lang() ?>
<style>
  .tfoot{
    text-align: left !important;
  }
  .select2-selection__rendered{
    position: absolute;
  }
</style>
<div class="title-page">
  <div class="page-bar">
    <ul class="page-breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
      <li><a href="#">Reports</a></li>
      <li><a href="#">Report Stock</a></li>
      <li><a href="#">Item Stock</a></li>
    </ul>
  </div>
</div>
<div class="page">
  <div class="top-content">
    <div class="row">
      <div class="col-sm-12 col-xs-12">
        <div class="title-add">
          <div class="pull-left">
            <h3>Item Stock</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
  <form action="{{url('/realty/report-stockin-print')}}" method="POST">
    @csrf
    <div class="form-search">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
          <div class="form-group">
            <strong>Project Name</strong> {!! Form::select('project_id[]', $projcts, null, ['class' => 'form-control select2 project_id','multiple']) !!}
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <div class="form-group">
            <strong>Category Name</strong> {!! Form::select('category_id[]', $categories, null, ['class' => 'form-control select2 category_id','multiple']) !!}
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <div class="form-group">
            <strong>Zone Name</strong> {!! Form::select('zone_id[]', $zones, null, ['class' => 'form-control select2 zone_id','multiple']) !!}
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <div class="form-group">
            <strong>Item N°</strong> {!! Form::text('item_name', null, array('placeholder' => 'Item N°','class' => 'form-control item_name')) !!}
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <div class="form-group">
            <strong>Street No</strong> {!! Form::text('street_no', null, array('placeholder' => 'Street No','class' => 'form-control street_no')) !!}
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <div class="form-group">
            <strong>Status</strong>
            <select name="status" class="select2 form-control status">
              <option value="">Select Option</option>
              <option value="1">Instock</option>
              <option value="2">Sales</option>
              <option value="3">Booking</option>
            </select>
          </div>
        </div>
        <div class="col-sm-12"><br/>
          <button type="submit" class="btn btn-sm btn-warning fa fa-print pull-right"> Print</button>
          <button type="button" class="btn btn-sm btn-primary fa fa-search pull-right" onclick="search()"> Search</button><br/><br/>
        </div>
      </div>
    </div>
    {!! Form::close() !!}
    <div class="box">
      <div class="box-header">
      </div>
      <div class="box-body table-responsive">
        <table id="datatable_item_deposit" class="table table-striped table-bordered table-hover nowrap">
          <thead>
            <tr>
              <th>No</th>
              <th>Project Name</th>
              <th>Category Name</th>
              <th>Street No</th>
              <th>Item N°</th>
              <th>Zone</th>
              <th>Size</th>
              <th>Cost</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody class="tbody">

          </tbody>
          <tfoot class="tfoot">
            <tr>
              <td colspan="7" class="text-right">Total : </td>
              <td></td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
</div>
@endsection
@section('js')
<script type="text/javascript" src="{{asset('assets/controller/report-stock.js')}}"></script>
<script type="text/javascript">
  function search() {
    $('#datatable_item_deposit').DataTable().destroy();
    var status      = $('.status').val();
    var item_name   = $('.item_id').val();
    var project_id  = $('.project_id').val();
    var category_id = $('.category_id').val();
    var zone_id = $(".zone_id").val();
    var street_no = $(".street_no").val();
    $('#datatable_item_deposit').DataTable({
      "autoWidth": false,
      ordering: true,
      serverSide: true,
      "searching": true,
      "scrollY":"600px",
      "scrollCollapse": true,
      "scrollX": true,
      lengthMenu: [
        [20, 30, 50, 100, 200, 500, 1000],
        [20, 30, 50, 100, 200, 500, 1000]
      ],
      dom: 'Blfrtip',
      buttons: [
        'copyHtml5',
        'excelHtml5'
      ],
      ajax: {
        type: "POST",
        url: '/realty/datatable-report-stockin',
        data: {
          _token: "{{csrf_token()}}",
          status:status,
          item_name:item_name,
          project_id:project_id,
          category_id:category_id,
          zone_id:zone_id,
          street_no:street_no
        }
      },
      columns: [{
          data: 'DT_RowIndex',
          'searchable': false
        },
        {
          data: 'project_name',
          'name': 'nso007_project_stock.project_name',orderable:false
        },
        {
          data: 'category_name',
          'name': 'nso007_category_stock.category_name',orderable:false
        },
        {
          data: 'item_street',
          'searchable': false
        },
        {
          data: 'item_house',
          'searchable': false
        },
        {
          data: 'item_zone',
          'searchable': false
        },
        {
          data: 'item_size',
          'searchable': false
        },
        {
          data: 'item_cost',
          'searchable': false
        },
        {
          data: 'item_price',
          'searchable': false
        }
      ],
      "initComplete": function(settings, json) {
        $('.main-spinner').hide();
      },
      "footerCallback": function(row, data, start, end, display) {
        var api = this.api(),
          data;
        var intVal = function(i) {
          return typeof i === 'string' ?
            i.replace(/[\$,]/g, '') * 1 :
            typeof i === 'number' ?
            i : 0;
        };
        var cost_Total = api
          .column(7)
          .data()
          .reduce(function(a, b) {
            return intVal(a) + intVal(b);
          }, 0);
        var price_Total = api
          .column(8)
          .data()
          .reduce(function(a, b) {
            return intVal(a) + intVal(b);
          }, 0);
        $(api.column(7).footer()).html("$" + parseFloat(cost_Total).toFixed(2));
        $(api.column(8).footer()).html("$" + parseFloat(price_Total).toFixed(2));
      },
    });
  }

  function excel() {
    $('#btn-export-excel').click();
  }
</script>
@endsection