@extends('layouts/layoutMaster')

@section('title', 'Material Inward')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

@section('vendor-style')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
    'resources/assets/vendor/libs/select2/select2.scss',
    'resources/assets/vendor/libs/@form-validation/form-validation.scss',
    'resources/assets/vendor/libs/animate-css/animate.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
    'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
    'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
    'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
    'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.scss',
    'resources/assets/vendor/libs/pickr/pickr-themes.scss'
])
@endsection

@section('vendor-script')
@vite([
    'resources/assets/vendor/libs/autosize/autosize.js',
    'resources/assets/vendor/libs/moment/moment.js',
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/select2/select2.js',
    'resources/assets/vendor/libs/@form-validation/popular.js',
    'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
    'resources/assets/vendor/libs/@form-validation/auto-focus.js',
    'resources/assets/vendor/libs/cleavejs/cleave.js',
    'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
    'resources/assets/vendor/libs/flatpickr/flatpickr.js',
    'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
    'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
    'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js',
    'resources/assets/vendor/libs/pickr/pickr.js'
])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms-pickers.js'])
@vite(['resources/assets/js/forms-extras.js'])
@endsection

@section('content')
<div class="card mb-6">
    <h5 class="card-header">{{ isset($materialinventor) ? 'Edit Stock ' : 'Add Stock' }}</h5>
    <input type="hidden" name="id" id="id" value="{{ isset($materialinventor) ? $materialinventor[0]->material_inward_id : '' }}">
      <form class="mb-0" id="order_form" method="POST" action="{{ isset($materialinventor) ? route('materialinventor-list.update', $materialinventor[0]->material_inward_id ) : route('materialinventor-list.store') }}" enctype="multipart/form-data">
        @csrf
        @if(isset($materialinventor))
            @method('PUT')
        @endif

        <div class="card-body">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">GR Details</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="tab2-tab" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Transport Details</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="tab3-tab" data-bs-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Inward History</a>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
              <div class="row g-6">
                <div class="col-md-4">
                    <div class="form-floating form-floating-outline">
                        <select name="vendor_id" id="vendor_id" class="select2 form-select" data-placeholder="Select Vendor" data-allow-clear="true">
                            <option></option>
                            @foreach ($vendors as $vendor)
                                <option value="{{ $vendor->id }}" {{ old('vendor_id', $materialinward->vendor_id ?? '') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                            @endforeach
                        </select>
                        <label for="vendor_id">Select Vendor</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-floating form-floating-outline">
                        <select name="po_id" id="po_id" class="select2 form-select" data-placeholder="Select Po No" data-allow-clear="true">
                            <option></option>
                        </select>
                        <label for="po_id">Select Po No</label>
                    </div>
                </div>
                <div class="col-md-4">
                  <div class="form-floating form-floating-outline">
                    <input type="text" id="po_no" name="po_no" class="form-control" placeholder="Po Number" value="{{ isset($materialinward) ? $materialinward->po_no : '' }}">
                    <label for="po_no">Po Number</label>
                  </div>
                </div>
              </div>
              <br>
              <div class="row g-6">
                <div class="col-md-3">
                    <div class="form-floating form-floating-outline">
                      <input type="text" id="challan_no" name="challan_no" class="form-control" placeholder="Challan No" value="{{ isset($materialinward) ? $materialinward->challan_no : '' }}">
                      <label for="challan_no">Challan No</label>
                    </div>
                </div>
                <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                    <input type="date" id="challan_date" name="challan_date" class="form-control" placeholder="Challan Date" value="{{ isset($materialinward) ? $materialinward->challan_date : '' }}">
                    <label for="challan_date">Challan Date</label>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                    <input type="text" id="gr_no" name="gr_no" class="form-control" placeholder="GR No" value="{{ isset($materialinward) ? $materialinward->gr_no : '' }}">
                    <label for="gr_no">GR No</label>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                    <input type="date" id="gr_date" name="gr_date" class="form-control" placeholder="GR Date" value="{{ isset($materialinward) ? $materialinward->gr_date : '' }}">
                    <label for="gr_date">GR Date</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
              <div class="row g-6">
                <div class="col-md-3">
                    <div class="form-floating form-floating-outline">
                      <input type="text" id="lr_no" name="lr_no" class="form-control" placeholder="LR No" value="{{ isset($materialinward) ? $materialinward->lr_no : '' }}">
                      <label for="lr_no">LR No</label>
                  </div>
                </div>
                <div class="col-md-3">
                    <div class="form-floating form-floating-outline">
                        <input type="date" id="lr_date" name="lr_date" class="form-control" placeholder="LR Date" value="{{ isset($materialinward) ? $materialinward->lr_date : '' }}">
                        <label for="lr_date">LR Date</label>
                    </div>
                </div>
                <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                      <input type="text" id="truck_no" name="truck_no" class="form-control" placeholder="Truck No" value="{{ isset($materialinward) ? $materialinward->truck_no : '' }}">
                      <label for="truck_no">Truck No</label>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-floating form-floating-outline">
                      <input type="text" id="transport" name="transport" class="form-control" placeholder="Transport" value="{{ isset($materialinward) ? $materialinward->transport : ''  }}">
                      <label for="transport">Transport</label>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-floating form-floating-outline">
                    <textarea id="autosize-demo" rows="5" name="remarks" placeholder="Remarks" class="form-control">{{ isset($materialinward) ? $materialinward->remarks : ''  }}</textarea>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
              <div class="row g-6">
                <div class="col-md-4">
                  <div class="form-floating form-floating-outline">
                    <input type="text" id="freight" name="freight" class="form-control" placeholder="Freight" value="{{ isset($materialinward) ? $materialinward->freight : ''  }}">
                    <label for="freight">Freight</label>
                </div>
                </div>
                <div class="col-md-4">
                    <div class="form-floating form-floating-outline">
                        <input type="text" id="hamali" name="hamali" class="form-control" placeholder="Hamali" value="{{ isset($materialinward) ? $materialinward->hamali : ''  }}">
                        <label for="hamali">Hamali</label>
                    </div>
                </div>
                <div class="col-md-4">
                  <div class="form-floating form-floating-outline">
                      <input type="text" id="others" name="others" class="form-control" placeholder="Others" value="{{ isset($materialinward) ? $materialinward->others : '' }}">
                      <label for="others">Others</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {{-- <br> --}}

          <input type="hidden" name="material_id" value="{{ $material->id ?? '' }}">
          <input type="hidden" name="order_id" id="order_id" value="{{ isset($materialinventor) ? $materialinventor[0]->order_id : '' }}">
          {{-- <div class="row gx-6">
            <div class="col-md-6">
                <div class="form-floating form-floating-outline">
                    <input type="text" class="form-control" id="po_number" name="po_number" placeholder="Enter PO Number"
                    value="{{ isset($materialinventor) ?  $materialinventor[0]->orders->po_number : ''}}">
                    <input type="hidden" name="order_id" id="order_id" value="{{ isset($materialinventor) ? $materialinventor[0]->order_id : '' }}">
                    <label for="po_number">Enter PO Number</label>
                </div>
            </div>
          </div> --}}
          {{-- <br> --}}
          <div class="row mb-6 mt-2 gx-6">
              <div class="col-md-12">
                <div class="form-floating form-floating-outline">
                  <select class="select2 form-select" id="order_items_id" name="order_items_id" data-placeholder="Select PO Item" data-allow-clear="true">
                      <option></option>
                  </select>
                </div>
              </div>
          </div>

          {{-- <br> --}}
          <div class="card md-3">
              <div class="card-header">
                  <h5 class="card-title mb-0">Selected Materials</h5>
              </div>
              <div class="card-datatable table-responsive">
                  <table class="table" id="materialsTable">
                      <thead>
                          <tr>
                              <th>Id</th>
                              <th>Name</th>
                              <th>Pack Size</th>
                              <th>Total</th>
                              <th>Batch No</th>
                              <th>MFG Date</th>
                              <th>Expiry Date</th>
                              <th>Actions</th>
                          </tr>
                      </thead>
                      <tbody id="materialsTableBody"></tbody>
                      {{-- @foreach ($materialinventor as $materialinventor) --}}
                      @if(isset($materialinventor))
                      @foreach ($materialinventor as $index => $materialinventor)
                      <tr>
                          <td> {{ $index + 1 }}
                            <input type="hidden" name="material_inventor_id[]" value="{{$materialinventor->id}}">
                          </td>
                          <td>
                              <input type="text" class="form-control" name="name[]" value="{{ $materialinventor->material->name ?? '' }}" placeholder="Material Name" readonly>
                              <input type="hidden" name="orderItems_id[]" value="{{$materialinventor->material_id}}">
                          </td>
                          <td>
                              <div class="input-group">
                                  <input type="text" class="form-control PackSize" name="PackSize[]" placeholder="Pack Size" value="{{ $materialinventor->pack_size ?? '' }}">
                                  <input type="text" class="form-control" name="material[]" value="{{ $materialinventor->material->purchaseUom->name ?? '' }}" readonly>
                                  <input type="number" class="form-control quantity" placeholder="Qty" name="quantity[]" min="0" max="1000" step="1" value="{{ $materialinventor->qty ?? '' }}">
                              </div>
                          </td>
                          <td>
                              <input type="number" class="form-control total" name="total[]" value="{{ $materialinventor->pack_size * $materialinventor->qty }}">
                          </td>
                          <td>
                              <input type="text" class="form-control" name="batchno[]" placeholder="Batch No" value="{{ $materialinventor->batch_no ?? '' }}">
                          </td>
                          <td>
                            <input type="date" class="form-control" name="mfg_date[]" placeholder="YYYY-MM-DD" value="{{ $materialinventor->mfg_date ?? '' }}">
                        </td>
                          <td>
                              <input type="date" class="form-control" name="date[]" placeholder="YYYY-MM-DD" value="{{ $materialinventor->expiry_date ?? '' }}">
                          </td>
                          <td>
                              <button type="button" class="btn btn-sm btn-icon delete-record" onclick="removeRow(this)">
                                  <i class="ri-delete-bin-7-line ri-20px"></i>
                              </button>
                          </td>
                      </tr>
                      @endforeach
                      @endif
                  </table>
              </div>
          </div>
        </div>
        <div class="card-footer pt-6">
            <button type="submit" class="btn btn-primary me-4 waves-effect waves-light">{{ isset($materialinventor) ? 'Update' : 'Submit' }}</button>
            <a href="{{ route('materialinventor-list.index') }}" class="btn btn-outline-secondary waves-effect">Cancel</a>
        </div>
      </form>
</div>

<script>
 $(document).ready(function() {
        // Disable po_no if po_id is selected
        $('#po_id').on('change', function() {
            if ($(this).val()) {
                $('#po_no').prop('disabled', true);  // Disable po_no if po_id is selected
            } else {
                $('#po_no').prop('disabled', false); // Enable po_no if po_id is not selected
            }
        });

        // Disable po_id if po_no has input
        $('#po_no').on('input', function() {
            if ($(this).val()) {
                $('#po_id').prop('disabled', true);  // Disable po_id if po_no is filled
            } else {
                $('#po_id').prop('disabled', false); // Enable po_id if po_no is empty
            }
        });
    });
</script>
<script>
  $(document).ready(function () {
    // Handle vendor selection and populate PO options
    $('#vendor_id').on('change', function () {
        var vendor_id = $(this).val();
        if (vendor_id) {
            $.ajax({
                url: '/get-po-by-vendor/' + vendor_id,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    var poSelect = $('#po_id');
                    poSelect.empty();
                    poSelect.append('<option></option>');

                    // Check if the response has data
                    if (Object.keys(data).length > 0) {
                        // Loop through the object and append options
                        $.each(data, function (key, po) {
                            poSelect.append('<option value="' + po.id + '" data-po-number="' + po.po_number + '">' + po.po_number + '</option>');
                        });
                    } else {
                        poSelect.append('<option disabled>No Purchase Orders found</option>');
                    }
                },
                error: function () {
                    alert('Error fetching purchase orders');
                }
            });
        } else {
            $('#po_id').empty().append('<option></option>');
        }
    });
});

</script>
<script>
  $(document).ready(function () {
      $("body").on("input", "input[name='quantity[]'], input[name='PackSize[]']", function() {
          var row = $(this).closest('tr');
          var packSize = parseFloat(row.find("input[name='PackSize[]']").val()) || 0;
          var quantity = parseFloat(row.find("input[name='quantity[]']").val()) || 0;
          var total = packSize * quantity;
          row.find("input[name='total[]']").val(total.toFixed(2)); // Use toFixed(2) to format the result to 2 decimal places
      });
  });
  $(document).ready(function() {
      $('.select2').select2({
          placeholder: "Select PO Items",
          allowClear: true
      });
      // When the PO number input changes
      $('#po_id').on('change', function () {
            var selectedOption = $(this).find(':selected');
            var poNumber = selectedOption.data('po-number');

            $('#materialsTableBody').empty(); // Clear existing rows

            if (poNumber) {
                $.ajax({
                    url: '/check-po-number',
                    method: 'POST',
                    data: {
                        po_number: poNumber,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        if (response.exists) {
                            populateOrderItems(response.orderItems, response.id);
                        } else {
                            $('#order_items_id').empty().append('<option></option>');
                        }
                    },
                    error: function (error) {
                        console.error('Error checking PO number:', error);
                    }
                });
            } else {
                $('#order_items_id').empty().append('<option></option>');
            }
        });

        $('#po_no').on('input', function () {
          const poNoValue = $(this).val();

          if (poNoValue) {
              $('#po_id').prop('disabled', true); // Disable po_id if po_no has input

              // AJAX call to fetch details for the entered PO number
              $.ajax({
                  url: '/check-po-number-materials', // Replace with your route
                  method: 'POST',
                  data: {
                      po_number: poNoValue,
                      _token: '{{ csrf_token() }}'
                  },
                  success: function (response) {
                      if (response.exists) {
                          populateOrderItemsNew(response.materials);
                      } else {
                          alert('PO Number not found. Please try again.');
                      }
                  },
                  error: function (error) {
                      console.error('Error fetching PO details:', error);
                  }
              });
          } else {
              $('#po_id').prop('disabled', false); // Enable po_id if po_no is cleared
          }
      });

      // When the selected items in the select2 change
      $('#order_items_id').on('change', function() {
          const selectedItemId = $(this).val(); // Single selected value
          const selectedMaterialName = $(this).find("option:selected").text();
          if (selectedItemId) {
              addMaterialRow(selectedItemId, selectedMaterialName);
          }
      });
  });
  // Function to populate the select options based on the PO number
  function populateOrderItems(orderItems, id) {
      $('#order_id').val(id);
      $('#order_items_id').empty().append('<option></option>');
      orderItems.forEach(item => {
          $('#order_items_id').append(`<option value="${item.material_id}" data-quantity="${item.quantity}">${item.material.name}</option>`);
      });
      $('#order_items_id').select2(); // Refresh select2
  }

  function populateOrderItemsNew(materials) {
    // alert(materials.id);
      $('#order_id').val(id);
      $('#order_items_id').empty().append('<option></option>');
      materials.forEach(item => {
          $('#order_items_id').append(`<option value="${item.id}" data-quantity="20000">${item.name}</option>`);
      });
      $('#order_items_id').select2(); // Refresh select2
  }

  let fakeIdCounter = 1;
  // Function to add a new row to the materials table
  function addMaterialRow(itemId, materialName) {
      const row = document.createElement('tr');
      const fakeIdCounter = document.querySelectorAll('#materialsTableBody tr').length + 1; // Counter for new row ID
      row.innerHTML = `
          <td>${fakeIdCounter}</td>
          <td>
              <input type="text" class="form-control" name="name[]" value="${materialName}" placeholder="Material Name" readonly>
              <input type="hidden" name="orderItems_id[]" value="${itemId}">
          </td>
          <td>
              <div class="input-group">
                  <input type="text" class="form-control" name="PackSize[]" placeholder="Pack Size">
                  <input type="text" class="form-control" name="material[]" value="{{ $material->purchaseUom->name ?? '' }}" readonly>
                  <input type="number" class="form-control" placeholder="Qty" name="quantity[]" value="0" min="0" max="1000" step="1">
              </div>
          </td>
          <td>
              <input type="number" class="form-control" name="total[]" value="0" min="0">
          </td>
          <td>
              <input type="text" class="form-control" name="batchno[]" placeholder="Batch No">
          </td>
           <td>
              <input type="date" class="form-control" name="mfg_date[]" placeholder="YYYY-MM-DD">
          </td>
          <td>
              <input type="date" class="form-control" name="date[]" placeholder="YYYY-MM-DD">
          </td>

          <td>
              <button type="button" class="btn btn-sm btn-icon delete-record" onclick="removeRow(this)">
                  <i class="ri-delete-bin-7-line ri-20px"></i>
              </button>
          </td>
      `;
      document.getElementById('materialsTableBody').appendChild(row);
      $('#order_items_id').val(null).trigger('change');
  }
  // Function to remove a row from the materials table
  function removeRow(button) {
      const row = button.closest('tr');
      if (row) {
          row.remove();
      }
  }
</script>

<script>
  function validateMaterials() {
    const materialQuantities = {}; // To store total quantities for each material
    let isValid = true; // Flag to track validation status

    // Iterate through each row in the materials table
    document.querySelectorAll('#materialsTableBody tr').forEach(row => {
      const materialId = row.querySelector('input[name="orderItems_id[]"]').value;
      const quantity = parseFloat(row.querySelector('input[name="total[]"]').value || 0);

      // Sum up quantities for the same material
      if (materialQuantities[materialId]) {
        materialQuantities[materialId] += quantity;
      } else {
        materialQuantities[materialId] = quantity;
      }
    });

    // Check each material's total against its data-quantity from the dropdown
    Object.keys(materialQuantities).forEach(materialId => {
      const option = document.querySelector(`#order_items_id option[value="${materialId}"]`);
      const maxQuantity = parseFloat(option.getAttribute('data-quantity') || 0);
      const materialName = option.textContent.trim();

      if (materialQuantities[materialId] > maxQuantity) {
        alert(`The total quantity for material "${materialName}" exceeds the PO Quantity!`);
        isValid = false;
      }
    });

    return isValid; // Return validation status
  }

  // Attach validation to form submission
  document.querySelector('#order_form').addEventListener('submit', function (e) {
    if (!validateMaterials()) {
      e.preventDefault(); // Prevent form submission if validation fails
    }
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function (e) {
    (function () {
      const formValidationExamples = document.getElementById('order_form'),
        formValidationSelect2Ele = jQuery(formValidationExamples.querySelector('[name="formValidationSelect2"]')),
        formValidationTechEle = jQuery(formValidationExamples.querySelector('[name="formValidationTech"]')),
        formValidationLangEle = formValidationExamples.querySelector('[name="formValidationLang"]'),
        formValidationHobbiesEle = jQuery(formValidationExamples.querySelector('[name="formValidationHobbies"]'));

      const fv = FormValidation.formValidation(formValidationExamples, {
        fields: {

          vendor_id: {
            validators: {
              notEmpty: {
                message: 'Please select Vendor'
              },
            }
          },
          challan_no: {
            validators: {
              notEmpty: {
                message: 'Please enter Challan No.'
              },
            }
          },
          challan_date: {
            validators: {
              notEmpty: {
                message: 'Please enter Challan Date'
              },
            }
          },
          gr_no: {
            validators: {
              notEmpty: {
                message: 'Please enter GR no.'
              },
            }
          },
          gr_date: {
            validators: {
              notEmpty: {
                message: 'Please enter GR Date'
              },
            }
          },
        },
        plugins: {
          trigger: new FormValidation.plugins.Trigger(),
          bootstrap5: new FormValidation.plugins.Bootstrap5({
            // Use this for enabling/changing valid/invalid class
            // eleInvalidClass: '',
            eleValidClass: '',
            rowSelector: function (field, ele) {
              return '.form-floating';
            }
          }),
          submitButton: new FormValidation.plugins.SubmitButton(),
          // Submit the form when all fields are valid
          defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
          autoFocus: new FormValidation.plugins.AutoFocus()
        },
        init: instance => {
          instance.on('plugins.message.placed', function (e) {
            //* Move the error message out of the `input-group` element
            if (e.element.parentElement.classList.contains('input-group')) {
              // `e.field`: The field name
              // `e.messageElement`: The message element
              // `e.element`: The field element
              e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
            }
            //* Move the error message out of the `row` element for custom-options
            if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
              e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
            }
          });
        }
      });
    })();
  });


</script>
<script>
  $(document).ready(function() {
      $('.select2').select2({
      });
  });
</script>
@endsection