@extends('admin.master')

@section('title', 'Generate 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" style="width: 100%" 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-outline card-info">
        <div class="card-header">
          <h3 class="card-title">Generate Invoice</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body table-responsive">
          <form action="{{ url('/invoice') }}" onsubmit="on_submit()" method="post">
            @csrf
            <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="2026-09-25" 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="2026-09-25" 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="" />
              </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>{{ $last_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>{{ $last_ship }}</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">

                </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" 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" 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" 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;"></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('sold_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="0" style="width: 69px;border:1px solid #ccc;padding-left:4px;"><span id="totalUnit">0</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="0" style="width: 69px;border:1px solid #ccc;padding-left:4px;"><span id="show_sub_total">0</span>
                      </th>
                    </tr>
                    <tr>
                      <th style="text-align:right">Discount(%) : </th>
                      <th>
                        <input type="number" id="dis_percent" name="dis_percent" value="0" style="width: 69px;border:1px solid #ccc;padding-left:4px;" required>
                        <input type="hidden" id="dis_amount" name="dis_amount" value="0" 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">0</span>
                      </th>
                    </tr>
                    <tr>
                      <th style="text-align:right">Total Amount({{ $settings->currency_symbol }}) : </th>
                      <th>
                        <input type="hidden" id="totalAmount" name="totalAmount" value="0" style="width: 69px;border:1px solid #ccc;padding-left:4px;"><span id="show_totalAmount">0</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 = '{{ $last_inv_id }}';
    window.open(url+'/slip/print/'+inv_id, '_blank');
    window.open(url+'/invoice/print/'+inv_id, '_blank');
    @endif
    function on_submit(){
      $(".overlay").show();
    }
    $(function() {
      // active left-menu
      // for tree addClass .menu-open
      // for submenu addClass .active
      $('#menu_generate_invoice').addClass('menu-open');
      $('#sub_sales_invoice').addClass('active');

      // stock table
      $("#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 items = [];
      $("#saleBtn").attr('disabled',true);
      $('#products tbody').on( 'click', '.addToList', function () {
        $("#saleBtn").attr('disabled',false);
        var id = $(this).attr('id');
        var sub_total = 0;
        var dis_percent = 0;
        var dis_amount = 0;
        var totalAmount = 0;
        var 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));



                  $("#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));

                  $("#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);
                });

        $('#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();

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

          totalUnit = totalUnit - cutValueUnit;
          $("#totalUnit").text(totalUnit);
          $("#total_qty").val(totalUnit);

          sub_total = sub_total - cutValue;
          $("#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();

        });

        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;
        }

      });

    });
  </script>
@endsection