@extends('admin.master')

@section('title', 'Edit Sales Invoice')

@section('contents')
  <!-- row -->
  <div class="row">
    <div class="col-md-5">
      <!-- general form elements -->
      <div class="card card-outline card-info">
        <div class="card-header">
          <h3 class="card-title">Stock</h3>
        </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" role="grid" aria-describedby="products">
              <thead>
              <tr>
                <th style="display: none;">SL#</th>
                <th>Name</th>
                <th>Type</th>
                <th style="display: none;">Serial No</th>
                <th style="display: none;">Description</th>
                <th style="width: 40px;">Qty</th>
                <th style="display: none;">Unit price</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_reg_number</th>
                <th style="display: none;">car_condition</th>
                <th style="display: none;">car_engine_capacity</th>
                <th style="display: none;">car_kilometers_run</th>
                <th style="width:150px;">Action</th>
              </tr>
              </thead>
            </table>
          </div>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->

    </div>

    <div class="col-md-7">
      <!-- general form elements -->
      <div class="card card-success">
        <div class="card-header">
          <h3 class="card-title">Edit Sales Invoice</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body table-responsive">
          <form action="{{ url('/invoice/edit/'.$invoice->id) }}" onsubmit="on_submit()" method="post">
            @csrf
            @method('put')
            <div class="form-group row">
              <div class="col-md-4">
                <label>Date <small>mm/dd/yyyy</small> <span style="color:red">*</span> </label>
                <input type="date" name="sales_date" id="sales_date" class="form-control form-control-sm" value="{{ $invoice->sales_date }}" required />
              </div>
              <div class="col-md-4">
                <label>Due Date <small>mm/dd/yyyy</small> <span style="color:red">*</span> </label>
                <input type="date" name="due_date" id="due_date" class="form-control form-control-sm" value="{{ $invoice->due_date }}" required />
              </div>
              <div class="col-md-4">
                <label>Tracking Reference</label>
                <input type="text" name="tracking_ref" id="tracking_ref" class="form-control form-control-sm" value="{{ $invoice->tracking_ref }}" />
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-6">
                <label>Consingee <span style="color:red">*</span></label>
                <textarea name="consingee" class="form-control form-control-sm" rows="3" required>{{ $invoice->consingee }}</textarea>
              </div>
              <div class="col-md-6">
                <label>Ship to <span style="color:red">*</span></label>
                <textarea name="ship_to" class="form-control form-control-sm" rows="3" required>{{ $invoice->ship_to }}</textarea>
              </div>
            </div>
            <div class="col-md-12 mb-3 table-responsive" style="border-radius:5px;border:1px solid #ccc; min-height:250px;">
              <table class="purchaseList table table-border table-sm" id="s_items">
                <thead>
                <tr>
                  <th>Item</th>
                  <th>Description</th>
                  <th style="width:40px;">Qty</th>
                  <th style="width:130px;">Unit Price({{ $settings->currency_symbol }})</th>
                  <th style="width:145px;">Total({{ $settings->currency_symbol }})</th>
                  <th style="width: 40px;padding: 0;"></th>
                </tr>
                </thead>
                <tbody id="selectedItems">
                    @if($sales_details)
                      @foreach($sales_details as $product)
                      <tr>
                        <td>
                          <input type='hidden' style='padding-left: 5px;width: 100px;' class='item_id' value='{{ $product->id }}' name='item_id[]' required>
                          <input type='text' style='padding-left: 5px;width: 100%;' class='item_id' value='{{ $product->product_name }}' name='item_name[]' required>
                        </td>
                        <td>
                          <textarea style='width: 100%;' row='1' name='item_desc[]'>{{ $product->product_desc }}</textarea>
                        </td>
                        <td><input type='text' style='padding-left: 5px;width: 100px;' id="qty_{{ $product->id }}" class='unit' value='{{ $product->qty }}' name='qty[]' required></td>
                        <td><input type='text' style='padding-left: 5px;width: 100px;' id="price_{{ $product->id }}" class='salePrice' value='{{ $product->price }}' name='price[]' required></td>
                        <td id="total_{{ $product->id }}">{{ $settings->currency_symbol }}<input type='text' style='padding-left: 5px;width: 100px;border: none;' class='totalSelling' value='{{ $product->total }}' readonly></td>
                        <td><button type='button' class='close' style='color:red;float:right;'>&times;</button></td>
                      </tr>
                      @endforeach
                    @endif
                </tbody>
              </table>
            </div>
            <div class="form-group row">
              <div class="col-md-7">
                <div class="form-group row">
                  <label for="container_no" class="col-sm-4 control-label">Container no: <span style="color:red">*</span></label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control form-control-sm" id="container_no" value="{{ $invoice->container_no }}" name="container_no" required>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="lock_no" class="col-sm-4 control-label">Lock no: <span style="color:red">*</span></label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control form-control-sm" id="lock_no" value="{{ $invoice->lock_no }}" name="lock_no" required>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="tare" class="col-sm-4 control-label">Tare: <span style="color:red">*</span></label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control form-control-sm" id="tare" value="{{ $invoice->tare }}" name="tare" required>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="tare" class="col-sm-4 control-label">Note:</label>
                  <div class="col-sm-8">
                    <textarea name="salesNote" id="salesNote" rows="3" class="form-control form-control-sm" style="border: 1px solid #afaeae;">{{ $invoice->salesNote }}</textarea>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="col-sm-4 control-label">Sold By <span style="color:red">*</span></label>
                  <div class="col-sm-8">
                    <select id="sold_by_id" name="sold_by_id" class="form-control form-control-sm @error('sold_by_id') is-invalid @enderror" required>
                      <option disabled selected value="">Select an Employee</option>
                      @foreach($employees as $employee)
                        <option value="{{ $employee->id }}">{{ $employee->emp_name }}</option>
                      @endforeach
                    </select>
                    @error('stockin_by_id')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                      </span>
                    @enderror
                  </div>
                </div>
              </div>
              <div class="col-md-5">
                <div class="" id="summary" style="float:right">
                  <table class="table table-sm">
                    <tr>
                      <th style="text-align:right">Total Qty : </th>
                      <th><input type="hidden" id="total_qty" name="total_qty" value="{{ $invoice->total_qty }}" style="width: 69px;border:1px solid #ccc;padding-left:4px;">
                        <span id="totalUnit">{{ $invoice->total_qty }}</span>
                      </th>
                    </tr>
                    <tr>
                      <th style="text-align:right">Sub Total({{ $settings->currency_symbol }}) : </th>
                      <th>
                        <input type="hidden" id="sub_total" name="sub_total" value="{{ $invoice->sub_total }}" style="width: 69px;border:1px solid #ccc;padding-left:4px;">
                        <span id="show_sub_total">{{ number_format($invoice->sub_total,2) }}</span>
                      </th>
                    </tr>
                    <tr>
                      <th style="text-align:right">Discount(%) : </th>
                      <th>
                        <input type="number" id="dis_percent" name="dis_percent" value="{{ $invoice->dis_percent }}" style="width: 69px;border:1px solid #ccc;padding-left:4px;" required>
                        <input type="hidden" id="dis_amount" name="dis_amount" value="{{ $invoice->dis_amount }}" style="width: 69px;border:1px solid #ccc;padding-left:4px;">
                      </th>
                    </tr>
                    <tr>
                      <th style="text-align:right">Dis. Amount({{ $settings->currency_symbol }}) : </th>
                      <th>
                        <span id="show_dis_amount">{{ number_format($invoice->dis_amount,2) }}</span>
                      </th>
                    </tr>
                    <tr>
                      <th style="text-align:right">Total Amount({{ $settings->currency_symbol }}) : </th>
                      <th>
                        <input type="hidden" id="totalAmount" name="totalAmount" value="{{ $invoice->totalAmount }}" style="width: 69px;border:1px solid #ccc;padding-left:4px;">
                        <span id="show_totalAmount">{{ number_format($invoice->totalAmount,2) }}</span>
                      </th>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div class="form-group col-md-12">
              <button type="submit" id="saleBtn" class="mb-2 btn btn-info col-md-4 float-right" style="font-size: 18px;font-weight: bold;">Submit and Print</button>
            </div>
          </form>
        </div>
        <!-- /.card-body -->
        <div class="overlay" style="display: none;">
          <i class="fas fa-2x fa-sync-alt"></i>
        </div>
      </div>
      <!-- /.card -->

    </div>

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

@section('script_links')
  <script>
    @foreach(['success','error'] as $type)
    @if(Session::has('msg-'.$type))
    toastr.{{ $type }}('{{ Session::get('msg-'.$type) }}');
            @endif
            @endforeach
            @if(Session::has('msg-success'))
    var url = '{{ url('/') }}';
    var inv_id = '{{ $invoice->id }}';
    window.open(url+'/slip/print/'+inv_id, '_blank');
    window.open(url+'/invoice/print/'+inv_id, '_blank');
    @endif
    function on_submit(){
      $(".overlay").show();
    }
    $(function() {
      $("#products").DataTable({
        initComplete: function () {
          $('#products_filter label input').focus();
        },
        pageLength: 25,
        processing: true,
        serverSide: true,
        ajax:{
          url: "{{ url('/invoice') }}",
        },
        columnDefs: [
          { "visible": false, "targets": 0 },
          { "visible": false, "targets": 3 },
          { "visible": false, "targets": 4 },
          { "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 },
          { "visible": false, "targets": 13 },
          { "visible": false, "targets": 14 },
          { "visible": false, "targets": 15 }
        ],
        columns:[
          {
            data: 'DT_RowIndex',
            name: 'DT_RowIndex'
          },
          {
            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: 'qty',
            name: 'qty',
            render: function(data,type,full,meta){
              if(data == 0 || data < 0){
                return `<span style="color:red;">${data}</span>`;
              } else {
                return `<span style="color:black;">${data}</span>`;
              }
            }
          },
          {
            data: 'price',
            name: 'price'
          },
          {
            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_reg_number',
            name: 'car_reg_number'
          },
          {
            data: 'car_condition',
            name: 'car_condition'
          },
          {
            data: 'car_engine_capacity',
            name: 'car_engine_capacity'
          },
          {
            data: 'car_kilometers_run',
            name: 'car_kilometers_run'
          },
          {
            data: 'action',
            name: 'action',
            orderable: false
          }
        ]
      });

      var sub_total = 0;
      var dis_percent = 0;
      var dis_amount = 0;
      var totalAmount = 0;
      var totalUnit = 0;

      calculation();
      var sold_by_id = '{{ $invoice->sold_by_id  }}';
      $("#sold_by_id").val(sold_by_id);

      var items = [];
      //$("#saleBtn").attr('disabled',true);
      $('#products tbody').on( 'click', '.addToList', function () {
        $("#saleBtn").attr('disabled',false);

        var id = $(this).attr('id');
            sub_total = 0;
            dis_percent = 0;
            dis_amount = 0;
            totalAmount = 0;
            totalUnit = 0;

        var btn = $(this);

        $.ajax({
          method: "POST",
          url: "{{ url('/getitem') }}",
          data: { _token: "{{ csrf_token() }}", id: id }
        })
        .done(function( msg ) {
          var item = msg;
          var newItem = {
            id : item.id,
            name : item.item_name,
            description : item.description,
            price : item.price,
            qty : 1,
            total : parseFloat(item.price)*1,
          }

          $("#s_items tbody").append(add_item(newItem));

          sub_total = 0;
          $("#s_items tbody input.totalSelling").each(function () {
            sub_total = sub_total + parseFloat($(this).val());
          });

          $("#sub_total").val(sub_total);
          $("#show_sub_total").text(parseFloat(sub_total).toFixed(2));

          dis_percent = parseFloat($("#dis_percent").val());
          dis_amount = (dis_percent/100)*sub_total;
          totalAmount = sub_total - dis_amount;

          $("#totalAmount").val(totalAmount);
          $("#show_totalAmount").text(parseFloat(totalAmount).toFixed(2));
          $("#show_dis_amount").text(parseFloat(dis_amount).toFixed(2));

            totalUnit = 0;
          $("#s_items tbody input.unit").each(function() {
            totalUnit = totalUnit + parseFloat($(this).val());
          });
          $("#totalUnit").text(totalUnit);
          $("#total_qty").val(totalUnit);

          btn.removeClass('btn-primany');
          btn.addClass('btn-success').text('Added').prop('disabled',true);

          setTimeout( function(){
            btn.removeClass('btn-success').addClass('btn-primany').text('Add').prop('disabled',false);
          },1000);

        }).fail(function() {
            btn.removeClass('btn-primany');
            btn.addClass('btn-danger').text('Not-added').prop('disabled',true);

            setTimeout( function(){
              btn.removeClass('btn-danger').addClass('btn-primany').text('Add').prop('disabled',false);
            },1000);
        });

        function add_item(item) {
          var currency = '{{ $settings->currency_symbol }}';
          var markup = `<tr>
                          <td>
                            <input type='hidden' style='padding-left: 5px;width: 100px;' class='item_id' value='${item.id}' name='item_id[]' required>
                            <input type='text' style='padding-left: 5px;width: 100%;' class='item_id' value='${item.name}' name='item_name[]' required>
                          </td>
                          <td>
                            <textarea style='width: 100%;' row='1' name='item_desc[]'>${ item.description ? item.description : "" }</textarea>
                          </td>
                          <td><input type='text' style='padding-left: 5px;width: 100px;' id="qty_${item.id}" class='unit' value='${item.qty}' name='qty[]' required></td>
                          <td><input type='text' style='padding-left: 5px;width: 100px;' id="price_${item.id}" class='salePrice' value='${parseFloat(item.price).toFixed(2)}' name='price[]' required></td>
                          <td id="total_${item.id}">${currency}<input type='text' style='padding-left: 5px;width: 100px;border: none;' class='totalSelling' value='${parseFloat(item.total).toFixed(2)}' readonly></td>
                          <td><button type='button' class='close' style='color:red;float:right;'>&times;</button></td>
                       </tr>`;
          return markup;
        }
      });

      function calculation(){
        $('#s_items tbody').on('keyup', '.unit', function () {
          var crRow = $(this).closest("tr");
          var unit = parseFloat(crRow.find(".unit").val());
          var sellingPrice = parseFloat(crRow.find(".salePrice").val());

          var totalPriceUnit = unit*sellingPrice;
          crRow.find(".totalSelling").val(totalPriceUnit);

          totalUnit = 0;
          $("input.unit").each(function() {
            totalUnit = totalUnit + parseFloat($(this).val());
          });
          $("#totalUnit").text(totalUnit);
          $("#total_qty").val(totalUnit);

          sub_total = 0;
          $("input.totalSelling").each(function() {
            sub_total = sub_total + parseFloat($(this).val());
          });
          $("#sub_total").val(sub_total);
          $("#show_sub_total").text(parseFloat(sub_total).toFixed(2));

          dis_percent = parseFloat($("#dis_percent").val());
          dis_amount = (dis_percent/100)*sub_total;
          totalAmount = sub_total - dis_amount;

          $("#totalAmount").val(totalAmount);
          $("#show_totalAmount").text(parseFloat(totalAmount).toFixed(2));
          $("#show_dis_amount").text(parseFloat(dis_amount).toFixed(2));
        });

        $('#s_items tbody').on( 'keyup', '.salePrice', function () {
          var crRow = $(this).closest("tr");
          var unit = parseFloat(crRow.find(".unit").val());
          var sellingPrice = parseFloat(crRow.find(".salePrice").val());

          var totalPriceUnit = unit*sellingPrice;
          crRow.find(".totalSelling").val(totalPriceUnit);

          totalUnit = 0;
          $("input.unit").each(function() {
            totalUnit = totalUnit + parseFloat($(this).val());
          });
          $("#totalUnit").text(totalUnit);
          $("#total_qty").val(totalUnit);

          sub_total = 0;
          $("input.totalSelling").each(function() {
            sub_total = sub_total + parseFloat($(this).val());
          });
          $("#sub_total").val(sub_total);
          $("#show_sub_total").text(parseFloat(sub_total).toFixed(2));

          dis_percent = parseFloat($("#dis_percent").val());
          dis_amount = (dis_percent/100)*sub_total;
          totalAmount = sub_total - dis_amount;

          $("#totalAmount").val(totalAmount);
          $("#show_totalAmount").text(parseFloat(totalAmount).toFixed(2));
          $("#show_dis_amount").text(parseFloat(dis_amount).toFixed(2));
        });

        $("#dis_percent").bind( 'change keyup', function () {
          dis_percent = parseFloat($("#dis_percent").val());
          dis_amount = (dis_percent/100)*sub_total;
          totalAmount = sub_total - dis_amount;

          $("#totalAmount").val(totalAmount);
          $("#show_totalAmount").text(parseFloat(totalAmount).toFixed(2));
          $("#show_dis_amount").text(parseFloat(dis_amount).toFixed(2));
        });

        $('#s_items tbody').on( 'click', '.close', function () {
          var findRow = $(this).closest("tr");
          var cutValue = findRow.find("input.totalSelling").val();  // 500

          var cutValueUnit = findRow.find("input.unit").val();// 1

          totalUnit = 0;
          $("input.unit").each(function() {
            totalUnit = totalUnit + parseFloat($(this).val()); // 3
          });

          totalUnit = totalUnit - cutValueUnit; // 3 - 1 = 2
          $("#totalUnit").text(totalUnit);
          $("#total_qty").val(totalUnit);

          sub_total = 0;
          $("input.totalSelling").each(function() {
            sub_total = sub_total + parseFloat($(this).val()); // 1500
          });
          sub_total = sub_total - cutValue;  // 1500 - 500 = 100
          $("#sub_total").val(sub_total);
          $("#show_sub_total").text(parseFloat(sub_total).toFixed(2));

          dis_percent = parseFloat($("#dis_percent").val());
          dis_amount = (dis_percent/100)*sub_total;
          totalAmount = sub_total - dis_amount;

          $("#totalAmount").val(totalAmount);
          $("#show_totalAmount").text(parseFloat(totalAmount).toFixed(2));
          $("#show_dis_amount").text(parseFloat(dis_amount).toFixed(2));

          if(totalUnit>0){
            $("#saleBtn").attr('disabled',false);
          } else {
            $("#saleBtn").attr('disabled',true);
            $("#dis_percent").val(0);
          }
          findRow.remove();

        });
      }

    });
  </script>
@endsection