@extends('admin.master')

@section('title', 'Stock')

@section('contents')
  <!-- row -->
  <div class="row">
    <div class="col-md-12">
        <div class="card card-widget widget-user">
          <!-- Add the bg color to the header using any of the bg-* classes -->
          <div class="widget-user-header bg-white" style="height:auto !important;">
            <h4 class="widget-user-username">Summary: Stock</h4>
          </div>
          <div class="overlay" style="display: none;">
            <i class="fas fa-2x fa-sync-alt"></i>
          </div>
          <div class="card-footer" style="padding-top: 0;padding-bottom: 0;">
            <div class="row">
              <div class="col-sm-3 border-right bg-success">
                <div class="description-block">
                  <h5 id="show_total_products" class="description-header" style="font-size: 30px;">{{ $stockins ?: 0 }}</h5>
                  <span class="description-text">TOTAL STOCKIN QTY</span>
                </div>
                <!-- /.description-block -->
              </div>
              <!-- /.col -->
              <div class="col-sm-3 border-right bg-warning">
                <div class="description-block">
                  <h5 id="show_total_tax" class="description-header" style="font-size: 30px;">{{ $sold ?: 0 }}</h5>
                  <span class="description-text">TOTAL SOLD QTY</span>
                </div>
                <!-- /.description-block -->
              </div>
              <!-- /.col -->
              <div class="col-sm-3 border-right bg-success">
                <div class="description-block">
                  <h5 id="show_total_tax" class="description-header" style="font-size: 30px;">{{ $available ?: 0 }}</h5>
                  <span class="description-text">TOTAL AVAILABLE QTY</span>
                </div>
                <!-- /.description-block -->
              </div>
              <!-- /.col -->
              <div class="col-sm-3 bg-cyan">
                <div class="description-block">
                  <h5 id="show_total_amount" class="description-header" style="font-size: 30px;">{{ number_format(($stock_value ?: 0),2) }}</h5>
                  <span class="description-text">TOTAL STOCK VALUE ({{$settings->currency_symbol}})</span>
                </div>
                <!-- /.description-block -->
              </div>
              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
        </div>
    </div>
    <div class="col-md-12">
      <!-- general form elements -->
      <div class="card card-outline card-info">
        <div class="card-header">
          <h3 class="card-title">Stock</h3>
          <a href="{{ url('/reports/stock/print') }}" target="_blank" id="prindBy" class="btn btn-success float-right">Print</a>
        </div>
        <!-- /.card-header -->
        <div class="card-body table-responsive">
          <div class="dataTables_wrapper dt-bootstrap4">
            <table id="products" class="table table-sm table-bordered table-hover dataTable" style="width: 100%" role="grid" aria-describedby="products">
              <thead>
              <tr class="bg-secondary">
                <th>SL#</th>
                <th style="display: none;">car_brand</th>
                <th style="display: none;">car_model</th>
                <th style="display: none;">car_color</th>
                <th style="display: none;">car_fuel_type</th>
                <th style="display: none;">car_trim</th>
                <th style="display: none;">car_model_year</th>
                <th style="display: none;">car_reg_number</th>
                <th style="display: none;">car_condition</th>
                <th style="display: none;">car_transmission</th>
                <th style="display: none;">car_body_type</th>
                <th style="display: none;">car_engine_capacity</th>
                <th style="display: none;">car_kilometers_run</th>
                <th>Name</th>
                <th>Type</th>
                <th>Serial No</th>
                <th>Description</th>
                <th>Stockin Qty</th>
                <th>Sold Qty</th>
                <th>Available Qty</th>
                <th>Unit price({{$settings->currency_symbol}})</th>
                <th style="width:80px;">Action</th>
              </tr>
              </thead>
              <tfoot>
              <tr class="bg-secondary">
                <th>SL#</th>
                <th style="display: none;">car_brand</th>
                <th style="display: none;">car_model</th>
                <th style="display: none;">car_color</th>
                <th style="display: none;">car_fuel_type</th>
                <th style="display: none;">car_trim</th>
                <th style="display: none;">car_model_year</th>
                <th style="display: none;">car_reg_number</th>
                <th style="display: none;">car_condition</th>
                <th style="display: none;">car_transmission</th>
                <th style="display: none;">car_body_type</th>
                <th style="display: none;">car_engine_capacity</th>
                <th style="display: none;">car_kilometers_run</th>
                <th>Name</th>
                <th>Type</th>
                <th>Serial No</th>
                <th>Description</th>
                <th>Stockin Qty</th>
                <th>Sold Qty</th>
                <th>Available Qty</th>
                <th>Unit price({{$settings->currency_symbol}})</th>
                <th style="width:80px;">Action</th>
              </tr>
              </tfoot>
            </table>
          </div>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->

    </div>
  </div>
  <!-- /.row -->

  <!-- Delete modal -->
  <div class="modal fade" id="modal-delete">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="modal_heading">Delete Product Confirmation</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p id="modal_text">Are you sure to delete the item?</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <form action="" method="post" id="deleteform">
            @csrf
            @method('delete')
            <button type="submit" id="deleteBtn" class="btn btn-primary">Yes</button>
          </form>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
@endsection

@section('script_links')
  <script>
    @foreach(['success','error'] as $type)
      @if(Session::has('msg-'.$type))
        toastr.{{ $type }}('{{ Session::get('msg-'.$type) }}');
      @endif
    @endforeach

    $(function() {
        // active left-menu
        // for tree addClass .menu-open
        // for submenu addClass .active
        $('#menu_reports').addClass('menu-open');
        $('#sub_stock').addClass('active');

        // report table
        $("#products").DataTable({
          initComplete: function () {
            $('#products_filter label input').focus();
          },
          pageLength: 25,
          processing: true,
          serverSide: true,
          ajax:{
            url: "{{ url('/stock') }}",
          },
          columnDefs: [
            { "visible": false, "targets": 1 },
            { "visible": false, "targets": 2 },
            { "visible": false, "targets": 3 },
            { "visible": false, "targets": 4 },
            { "visible": false, "targets": 5 },
            { "visible": false, "targets": 6 },
            { "visible": false, "targets": 7 },
            { "visible": false, "targets": 8 },
            { "visible": false, "targets": 9 },
            { "visible": false, "targets": 10 },
            { "visible": false, "targets": 11 },
            { "visible": false, "targets": 12 }
          ],
          columns:[
            {
              data: 'DT_RowIndex',
              name: 'DT_RowIndex'
            },
            {
              data: 'car_brand',
              name: 'car_brand'
            },
            {
              data: 'car_model',
              name: 'car_model'
            },
            {
              data: 'car_color',
              name: 'car_color'
            },
            {
              data: 'car_fuel_type',
              name: 'car_fuel_type'
            },
            {
              data: 'car_trim',
              name: 'car_trim'
            },
            {
              data: 'car_model_year',
              name: 'car_model_year'
            },
            {
              data: 'car_reg_number',
              name: 'car_reg_number'
            },
            {
              data: 'car_condition',
              name: 'car_condition'
            },
            {
              data: 'car_transmission',
              name: 'car_transmission'
            },
            {
              data: 'car_body_type',
              name: 'car_body_type'
            },
            {
              data: 'car_engine_capacity',
              name: 'car_engine_capacity'
            },
            {
              data: 'car_kilometers_run',
              name: 'car_kilometers_run'
            },
            {
              data: 'item_name',
              name: 'item_name'
            },
            {
              data: 'type',
              name: 'type',
              render: function(data,type,full,meta){
                if(data == "Cars"){
                  return "<span class='right badge badge-success'>"+data+"</span>";
                } else {
                  return "<span class='right badge badge-info'>"+data+"</span>";
                }
              },
            },
            {
              data: 'serial_no',
              name: 'serial_no'
            },
            {
              data: 'description',
              name: 'description'
            },
            {
              data: 'stockin_qty',
              name: 'stockin_qty',
              render: function(data,type,full,meta){
                if(data === null || data == 0){
                  data = 0;
                  return `<span style='color:red;'>${data}</span>`;
                } else if(data < 0){
                  return `<span style='color:red;'>${data}</span>`;
                } else {
                  return data;
                }
              },
            },
            {
              data: 'sold_qty',
              name: 'sold_qty',
              render: function(data,type,full,meta){
                if(data === null || data <= 0){
                  data = 0;
                  return `<span style='color:red;'>${data}</span>`;
                } else {
                  return data;
                }
              },
            },
            {
              data: 'qty',
              name: 'qty',
              render: function(data,type,full,meta){
                if(data === null || data == 0){
                  data = 0;
                  return `<span style='color:red;'>${data}</span>`;
                } else if(data < 0){
                  return `<span style='color:red;'>${data}</span>`;
                } else {
                  return data;
                }
              },
            },
            {
              data: 'price',
              name: 'price',
              render: function(data,type,full,meta){
                var price = numeral(data).format('0,0.00');
                return price;
              },
            },
            {
              data: 'action',
              name: 'action',
              orderable: false
            }
          ]
        });

        $('#products tbody').on( 'click', '.delete', function () {
          var id = $(this).attr('id');
          $.ajax({
            method: 'post',
            url: '{{ url('/check_product_in_sales') }}',
            data: { _token : '{{ csrf_token() }}', id : id },
            beforeSend: function () {

            },
            complete: function () {

            },
            success: function (data) {
              if(data == 0){
                $("#deleteBtn").prop('disabled',false);
                var action = "{{ url('/product/') }}/"+id;
                $("#deleteform").attr("action",action);
                $('#modal_heading').text("Delete Product Confirmation");
                $('#modal_text').text("Are you sure to delete the item?").css({'color':'black'});
              } else {
                $("#deleteBtn").prop('disabled',true);
                $('#modal_heading').text("Sorry Can't Delete");
                $('#modal_text').text("Sorry!!! This item is related to sold history. Can't delete this.").css({'color':'red'});
              }
            }
          });
        });
    });
  </script>
@endsection