@extends('layouts.admin')

@section('content')
@php $readonly=''; @endphp
@if($action=='View')
@php $readonly='readonly'; @endphp
@endif
<style>
  .fix-button-main {
    position: fixed;
    width: -webkit-fill-available;
    left: auto;
  }
</style>

<div class="page-links">
  <a href="{{ route('dashboard') }}">Dashboard</a>
  <span> > </span>
  <a href="{{ route('purchase-order-cancels.index') }}">Purchase Order Cancel</a>
</div>
<div class="row">
  <div class="col-xxl-12 col-lg-12 col-12">
    @if($action == 'Edit')
    <form class="form-data" id="edit_form" method="POST" action="{{ route('purchase-order-cancels.update', [$record->id]) }}" enctype="multipart/form-data">
      {{ method_field('PUT') }}
      @php $id=$record->id; @endphp
      @else
      @php $id=0; @endphp
      <form class="form-data" method="POST" id="add_form" action="{{ route('purchase-order-cancels.store') }}" enctype="multipart/form-data">
        @endif
        @csrf
        <div class="card-main">
          <h2 class="iheading-man">{{ __($title) }}</h2>
          <div class="row">
            <div class="col-lg-4 col-md-6 col-12 mb-3">
              <label>P.O No. <small class="red">* </small></label>
              @if(old('po_id'))
              @php $purchase_order_id = old('po_id'); @endphp
              @elseif(isset($record->purchase_order_id) && $record->purchase_order_id != '')
              @php $purchase_order_id = $record->purchase_order_id; @endphp
              @else
              @php $purchase_order_id = 0; @endphp
              @endif
              <select class="form-control" name="po_id" id="po_id">
                <option value="">-- Select --</option>
                @foreach($orders as $order)
                <option value="{{ $order->id }}" {!! ($purchase_order_id==$order->id) ? 'selected' : '' !!}>{{ $order->po_number.' ('.$order->po_date.')' }}</option>
                @endforeach
              </select>
              @error('po_id')
              <span class="error">{{ $message }}</span>
              @enderror
            </div>

            <div class="col-lg-2 col-md-6 col-12 mb-3">
              @if(old('vendor'))
              @php $vendor = old('vendor'); @endphp
              @elseif(isset($record->vendor->name) && $record->vendor->name != '')
              @php $vendor = $record->vendor->name; @endphp
              @else
              @php $vendor = ''; @endphp
              @endif

              <label>Vendor <small class="red">* </small></label>
              <input type="text" name="vendor" class="form-control" id="vendor" value="{{$vendor}}" />
            </div>



            <div class="col-lg-2 col-md-6 col-12 mb-3">
              <label>Cancel Date <small class="red">* </small></label>
              @if(old('canceled_date'))
              @php $canceled_date = old('canceled_date'); @endphp
              @elseif(isset($record->canceled_date) && $record->canceled_date != '')
              @php $canceled_date = date('Y-m-d',strtotime($record->canceled_date)); @endphp
              @else
              @php $canceled_date = date('Y-m-d'); @endphp
              @endif
              <input type="date" id="canceled_date" name="canceled_date" value="{{ $canceled_date }}" class="form-control @error('canceled_date') is-invalid @enderror" {{$readonly}}>
              @error('canceled_date')
              <span class="error">{{ $message }}</span>
              @enderror
            </div>


            <!-- new-card -->
            <div class="fix-button-main">
              <div class="save-fix">
                <div class="float-start d-inline-flex">
                  <table class="table table-borderless mb-0">
                    <tr>
                      <td class="border-end px-3">
                        <p class="mt-2 d-inline">Subtotal: </p> &nbsp;
                        <h2 class="d-inline">$<span id="footer-subtotal">0</span></h2>

                      </td>
                      <td class="border-end px-3">
                        <p class="mt-2 d-inline">Freight: </p> &nbsp;
                        <h2 class="d-inline">$<span id="footer-freight">0</span></h2>
                      </td>
                      <td class="px-3">
                        <p class="mt-2 d-inline">Total: </p> &nbsp;
                        <h2 class="d-inline">$<span id="footer-total">0</span></h2>

                      </td>
                    </tr>
                  </table>
                </div>
                <div class="float-end">
                  @if($action!='View')
                  <button type="submit" class="btn save-b me-3" type="button">
                    Save
                  </button>
                  @endif
                  <a type="button" class="btn btn-light me-2 float-end save-draft" href="{{ route('purchase-order-cancels.index') }}"> {!! ($action!='View') ? 'Cancel' : 'Back' !!}</a>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div id="itemInfo" class="mb-5">
          @if(isset($record->products))
          @include('purchase-order-cancel.item-info',['po_number'=>$record->po_number,'products'=>$products])
          @endif
        </div>
        <br />
        <br />
      </form>
  </div>
</div>
@endsection
@push('scripts')
<script>
  $(document).ready(function() {
    po_id = $("#po_id").val();
    if (po_id) {
      setTimeout(() => {
        $.ajax({
          type: "GET",
          url: "{{ route('purchase-order-cancels.getItemInfo') }}",
          data: {
            po_id: po_id,
            action: "{{$action}}",
            id: "{{$id}}"
          },
          success: function(response) {
            $('#itemInfo').html(response.html);

            $('.cancel_qty').each(function(i, e) {
              updateAmount(this);
            });

          }
        });
      }, 200);
    }

    


    $('#po_id').select2();

    $(document).on('change', '#po_id', function() {
      po_id = $(this).val();
      $.ajax({
        type: "GET",
        url: "{{ route('purchase-order-cancels.getItemInfo') }}",
        data: {
          po_id: po_id,
          action: "{{$action}}",
          id: "{{$id}}"
        },
        success: function(response) {
          $('#itemInfo').html(response.html);
          $('#vendor').val(response.vendor_name);
        }
      });
    });

    $(document).on('change', '#product_id', function() {
      product_id = $('#product_id').val();
      $.ajax({
        type: "GET",
        url: "{{ route('purchase-orders.getItems') }}",
        data: {
          product_id: product_id
        },
        success: function(response) {
          $('#itemList').append(response);
          // $('#product_id').select2();
          // $("#product_id option:contains('" + product_id + "')").attr("disabled","disabled");
          $('#product_id option[value="' + product_id + '"]').attr("disabled", true);

        }
      });
    });

    $(document).on('change', '.cancel_qty', function() {
      updateAmount(this);
    });

    function updateAmount(that) {
      color_id = $(that).attr('color-id');
      product_id = $(that).attr('product-id');
      size_id = $(that).attr('size-id');
      qty = $(that).val();
      unit_price = $('.unit_price' + product_id + color_id + size_id).val();
      total_unit_price = qty * unit_price;
      freight = parseInt($('.freight' + product_id + color_id + size_id).val());
      total_freight = qty * freight;
      line_total = total_unit_price + total_freight;
      $('.line_total' + product_id + color_id + size_id).html(line_total);
      $('.total_price' + product_id + color_id + size_id).val(total_unit_price);
      $('.total_freight' + product_id + color_id + size_id).val(total_freight);

      footerSubTotal = 0;
      footerFreight = 0;
      footerTotal = 0;
      $('.total_price').each(function(index, element) {
        if (element.value != '') {
          footerSubTotal = footerSubTotal + parseInt(element.value);
        }
      });

      $('.total_freight').each(function(index, element) {
        if (element.value != '') {
          footerFreight = footerFreight + parseInt(element.value);
        }
      });

      $('.line_total').each(function(index, element) {
        if (element.innerHTML != '') {
          footerTotal = footerTotal + parseInt(element.innerHTML);
        }
      });

      $('#footer-subtotal').html(footerSubTotal);
      $('#footer-freight').html(footerFreight);
      $('#footer-total').html(footerTotal);
    }
  });
</script>
@endpush