@extends('layouts.customapp')
@section('content')
<style>
/* Form style */
.form-control {
    font-size: 11px !important;
    border-radius: 2px !important;
    color: black !important;
}
 
/* .lds-css{
          margin-bottom:50px !important;
        } */
.popup-trigger {
    color: dodgerblue !important;
    cursor: pointer;
}
 
.form-align {
    color: black;
}
 
.no-outline:focus {
    outline: none !important;
}
 
button.dt-button:first-child {
    padding: 2px 9px !important;
}
 
.fa-file-excel:before {
    color: #1D6F42;
}
 
.custom-modal-dialog {
    max-width: 1016px !important;
}
 
.modal-body {
    font-size: 11px !important;
    font-family: Verdana, Arial, Helvetica !important;
    color: black !important;
}
 
.dataTables_wrapper .dataTables_length {
    margin-bottom: 11px;
}
 
table.dataTable thead .sorting {
    background-image: none !important;
}
 
#procurementdetails-list thead th:first-child {
    background-image: none !important;
}
 
#procurementdetails-list thead th {
    pointer-events: none;
}
 
#procurementdetails-list {
    border-collapse: collapse;
    width: 100% !important;
}
 
#procurementdetails-list th,
#procurementdetails-list td {
    border: 1px solid black;
    padding: 4px;
    color: black;
    text-align: left;
}
 
#procurementdetails-list th {
    background-color: #114680;
    color: white;
    font-size: 15px !important;
}
 
#procurementdetails-list td {
    font-size: 14px !important;
}
 
.card-header {
    padding: 5px 10px !important;
}
 
.card-title {
    color: #114680;
}
 
#procurementdetails-list tbody tr:hover {
    background-color: #f2f2f2;
}
 
#procurementdetails-list_filter {
    margin-bottom: 8px;
}
 
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px 13px !important;
}
 
.status-open {
    background-color: #f56b6b;
}
 
.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    outline: 2px solid #114680;
}
 
.dataTables_wrapper .dataTables_filter input[type="search"] {
    padding: 2px !important;
}
 
.card-body {
    font-size: 14px !important;
}
 
#suggesstion-box li {
    list-style-type: none !important;
    padding: 7px !important;
 
}
 
.align-top {
    margin-top: 15px;
    padding-right: 10px;
    padding-left: 10px
}
 
.error {
    color: red;
    margin-top: 5px
}
 
.frmSearch {
    position: absolute;
    z-index: 31;
    background: white;
    width: 300px;
}
 
 
.option:hover {
    background-color: #f0f0f0;
}
 
.modalcol {
    text-align: end;
    margin-top: 16px;
    margin-bottom: 34px;
    margin-left: -6px;
}
 
 
.modal-dialog {
    max-width: 600px !important;
}
 
.supplierwid {
    width: 260px !important;
}
</style>
 
<div id="preloder">
    <div class="loader"></div>
</div>
<div class="col-md-12 align-top">
    <div class="card border shadow">
 
        <div class='col modalcol'>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newSupplierModal">
                Add New Procurement
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="procurementdetails-list" class="display compact">
                    <thead>
                        <tr>
                            <th>S.No.</th>
                            <th>User Name</th>
                            <th>Email</th>
                            <th>Mobile No</th>
                          
                            <th>Option</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="newSupplierModal" tabindex="-1" role="dialog" aria-labelledby="newSupplierModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newSupplierModalLabel">Add New Procurement</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="procurementform">
                    <div class="row">
                        <div class="form-group">
                            <input type="hidden" class="form-control supplierwid" id="usertype" name="usertype"
                                value='2'>
                        </div>
                        <div class="col-md-6">
                           <div class="form-group">
                                <label for="employee">Employee ID</label>
                                <input type="text" class="form-control supplierwid" id="emp_id" name="emp_id">
				<input type="hidden" class="form-control supplierwid" id="empl" name="empl">
                            </div>
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" class="form-control supplierwid" id="username" name="username">
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control supplierwid" id="email" name="email">
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" class="form-control supplierwid" id="password" name="password">
                            </div>
 
 
                        </div>
                        <div class="col-md-6">
 
 
                            <div class="form-group">
                                <label for="phone">Phone</label>
                                <input type="text" class="form-control supplierwid" id="phone" name="phone">
                            </div>
                            <div class="form-group">
                                <label for="company">Company</label>
                                <select class="form-control mySelect" multiple="multiple" id="company" name="company[]" style="width: 100%;height: 30px">
                                    
                                </select>
                           </div>
                           
                            <div class="form-group">
                                <label for="division">Division</label>
                                <input type="hidden" class="form-control supplierwid" id="comp_no" name="comp_no">
                                <select class="form-control mySelect1" multiple="multiple" id="division" name="division[]" style="width: 100%;height: 30px">
                                </select>
                            </div>
                            <div class="form-group">
                                <div class='supplierwid'>
                                    <label for="supplier">Supplier</label>
                                    <select class="form-control mySelect2" id="supplier" name="supplier[]"
                                        multiple="multiple" style="width: 100%;height: 30px">
 
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
 
        </div>
    </div>
</div>

<!-- edit popup start -->
<div class="modal fade" id="editProcurementModal" tabindex="-1" role="dialog" aria-labelledby="editProcurementModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProcurementModalLabel">Edit Procurement</h5>
                <button type="button" class="close" id="close_edit" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="procurementform1">
                    <div class="row">
                        <div class="form-group">
                            <input type="hidden" class="form-control supplierwid" id="usertype" name="usertype"
                                value='2'>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="username">Employee ID</label>
                                <input type="text" class="form-control supplierwid" id="edit_emp_id" name="edit_emp_id" readonly>
                            </div>
                            <input type="hidden" class="form-control " id="procurementId_id" name="procurementId_id">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" class="form-control supplierwid" id="edit_username" name="edit_username">
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control supplierwid" id="edit_email" name="edit_email">
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone</label>
                                <input type="text" class="form-control supplierwid" id="edit_phone" name="edit_phone">
                            </div>
 
                        </div>
                        <div class="col-md-6">
 
                            <div class="form-group">
                                <label for="company">Company</label>
                                <select class="form-control mySelect" multiple="multiple" id="edit_company" name="edit_company[]" style="width: 100%;height: 30px">
                                   
                                </select>
                           </div>
                           
                            <div class="form-group">
                                <label for="division">Division</label>
                                <input type="hidden" class="form-control supplierwid" id="eidt_comp_no" name="eidt_comp_no">
                                <select class="form-control mySelect1" multiple="multiple" id="edit_division" name="edit_division[]" style="width: 100%;height: 30px">
                                </select>
                            </div>
                            <div class="form-group">
                                <div class='supplierwid'>
                                    <label for="supplier">Supplier</label>
                                    <select class="form-control mySelect2" id="edit_supplier" name="edit_supplier[]"
                                        multiple="multiple" style="width: 100%;height: 30px">
 
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary" id="updateprocurement">Submit</button>
                </form>
            </div>
 
        </div>
    </div>
</div>
    <!-- edit popup end -->

@endsection
 
@section('custom-css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
@endsection
 
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
    integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
 
<!-- Typeahead.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
 
 
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css">
 
 
<script src="{{ asset('backend/js/procurementdetails.js') }}"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
 



<script>
        $(document).ready(function() {
            $("#newSupplierForm").validate({
                rules: {
                    emp_id: {
                        required: true,
                        minlength: 2
                    },
                    username: {
                        required: true,
                        minlength: 2
                    },
                    email: {
                        required: true,
                        minlength: 2
                    },
                  
                    division: {
                        required: true,
                        minlength: 2
                    },
                   
                    phone: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    company: {
                        required: true,
                        minlength: 2
                    },
                   
                    
                },
                messages: {
                    emp_id: {
                        required: "Employee ID is required",
                        minlength: "Employee ID must be at least 2 characters long"
                    },
                    username: {
                        required: "Username is required",
                        minlength: "Username must be at least 2 characters long"
                    },
                    email: {
                        required: "Email is required",
                        email: "Please enter a valid email address"
                    },
                  
                    division: {
                        required: "Please enter your division",
                        minlength: "Your division must be at least 2 characters long"
                    },
                    phone: {
                        required: "Please enter your phone number",
                        digits: "Please enter only digits",
                        minlength: "Your phone number must be at least 10 digits long",
                        maxlength: "Your phone number must be no more than 15 digits long"
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 6 characters long"
                    },
                    company: {
                        required: "Please enter your company name",
                        minlength: "Your company name must be at least 2 characters long"
                    },
                },
               
            });
        });
    </script>




	<script>
$(document.body).on('click', '.edit-procurement', function(event) {
    event.preventDefault();
    const procurementId = $(this).data('id');
   var neew = $("#procurementId_id").val(procurementId); 
    $.ajax({
        url: '{{ env('API_URL') }}' + 'editprocurement/' + procurementId,
        method: 'GET',
        beforeSend: function() {
            $("#preloder").fadeOut();
        },
        success: function(response) {           
            $("#preloder").fadeOut();
            const supplier_edit = response.header;
            $('#edit_emp_id').val(supplier_edit.tno);
            $('#edit_username').val(supplier_edit.name);
            $('#edit_email').val(supplier_edit.email);
            $('#edit_phone').val(supplier_edit.moblie_no);
            const companynameDropdown = $('#edit_company');
            companynameDropdown.empty();
 
            const myarray = response.header.comp_code;
            const mydivision = response.header.division;
            const myledgercode = response.header.ledger_code;
            var ledger = $('#ledger_code').val(myledgercode);
            localStorage.setItem('mydivision', JSON.stringify(mydivision));
            localStorage.setItem('myledgercode', JSON.stringify(myledgercode));
           
            if (response.company && Array.isArray(response.company)) {
                response.company.forEach(function(company, index) {
                    const option = $('<option></option>').val(company.companycode).text(company.companyname);
                    if (myarray.includes(company.companycode)) {
                        option.attr('selected', 'selected');
                       
                    }
                    companynameDropdown.append(option);
                    $('#edit_company').trigger('change');
                });
            }
         },
        error: function(error) {
            toastr.error('Error fetching supplier data');
        }
    });
});
 
 
$('#edit_company').on('change', function() {
    let companycode = $(this).val();
 
    if (companycode) {
        $.ajax({
            url: '{{ env('API_URL') }}getdivisionlist',
            method: 'POST',
            data: {
                company: companycode
            },
            success: function(response) {
                if (response && response.success) {
                    var divisionData = response.data.map(function(item) {
                        return {
                            id: item.comp_no,
                            text: `${item.compname} - ${item.division}`
                        };
                    });
 
                    var divisionDropdown = $("#edit_division");
                    divisionDropdown.empty();
                   
                    const storedArray = JSON.parse(localStorage.getItem('mydivision')) || []; 
                    let optionSelected = false;
 
                    if (divisionData.length > 0) {
                        divisionData.forEach(function(option) {
                            var newOption = new Option(option.text, option.id);
 
                            if (storedArray.includes(option.id)) {
                                $(newOption).prop('selected', true);
                                optionSelected = true;
                            }
 
                            divisionDropdown.append(newOption);
                            $('#edit_division').trigger('change');
 
                        });
 
                        if (!divisionDropdown.hasClass("select2-hidden-accessible")) {
                            divisionDropdown.select2({
                                placeholder: "Select a division",
                                allowClear: false,
                                minimumResultsForSearch: 5
                            });
                        } else {
                            divisionDropdown.trigger('change');
                        }
                    }
 
                    if (!optionSelected) {
                        divisionDropdown.val(null).trigger('change');
                    }
                } else {
                    toastr.error('Divisions not found for selected company');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching division data:', status, error);
                toastr.error('Error fetching division details');
            }
        });
    }
});
 
$('#edit_division').on('change', function() {
    let divisions = $(this).val();
    $("#edit_supplier").empty().select2({
        placeholder: "Select a supplier",
        allowClear: true,
        minimumResultsForSearch: 5
    });
    if (divisions && divisions.length > 0) {
 
    var requests = divisions.map(function(division) {
        var requestUrl = '{{ env('API_URL') }}supplierlist';
        return $.ajax({
            url: requestUrl,
            method: 'POST',
            data: { division: division }
        });
    });
 
 
    $.when.apply($, requests).done(function() {
    var supplierData = [];
    var responses = (divisions.length === 1) ? [arguments] : arguments;
 
    for (var i = 0; i < responses.length; i++) {
        var response = responses[i][0];
        console.log('API Response for division', divisions[i], ':', response);
        if (response && response.success) {
            var suppliers = response.data.map(function(item) {
                return {
                    id: item.id,
                    text: item.name,
                    ledger_code: item.ledger_code,
                };
            });
            supplierData = supplierData.concat(suppliers);
        } else {
            toastr.error('Suppliers not found for one of the selected divisions');
        }
    }
 
    var uniqueSuppliers = supplierData.filter((value, index, self) =>
        index === self.findIndex((t) => (
            t.id === value.id && t.text === value.text && t.ledger_code === value.ledger_code
        ))
    );
 
    const storedLedger = JSON.parse(localStorage.getItem('myledgercode')) || []; 
    let optionsHtml = uniqueSuppliers.map((supplier) => {
        const isSelected = storedLedger.includes(supplier.ledger_code) ? 'selected' : '';
        return `<option value="${supplier.ledger_code}" data-ledger-code="${supplier.ledger_code}" ${isSelected}>${supplier.text}</option>`;
    }).join('');
 
    $("#edit_supplier").html(optionsHtml).select2({
        placeholder: "Select a supplier",
        allowClear: true,
        minimumResultsForSearch: 5
    });
 
}).fail(function(xhr, status, error) {
    console.error('Error fetching supplier data:', status, error);
    toastr.error('Error fetching supplier details');
});
 
}
 
});
 
 
 $('#close_edit').click(function() {
            $('#editProcurementModal').modal('hide');
        });
$('#updateprocurement').click(function() {

console.log('update');
            event.preventDefault();
            var idd = $('#procurementId_id').val();
var division = $("#edit_division").val();
    var company = $("#edit_company").val();
    var ledgerCode = $("#edit_supplier").val();
console.log(ledgerCode+'dfghjkl;');
            var formData = {
      usertype: $("#usertype").val(),
      email: $("#edit_email").val(),
      username: $("#edit_username").val(),
      tno: $("#edit_emp_id").val(),
      phone: $("#edit_phone").val(),
     
        division: Array.isArray(division) ? division.join(",") : division,
        emp_id: idd,
        comp_code: Array.isArray(company) ? company.join(",") : company,
        ledger_code: Array.isArray(ledgerCode) ? ledgerCode.join(",") : ledgerCode
   
    };
console.log(formData,'new upate');
            $.ajax({
                url: '{{ env('API_URL') }}' + 'procurement_update/' + idd,
                method: 'POST',
                data: formData,
                success: function(response) {
                   
                    $('#editProcurementModal').modal('hide');
                    toastr.success('Supplier details updated successfully');
                },
                error: function(error) {
                    // Handle error
                    console.error('Error saving supplier:', error);
                    toastr.error('Error saving supplier details');
                }
            });
        });
 
 
</script>
<script>
     $(document).ready(function() {
  $(document.body).on('click', '.edit-procurement', function(event) {
    event.preventDefault();
    $('#editProcurementModal').modal('show');
  });
  $('#close_edit').click(function() {
            $('#editProcurementModal').modal('hide');
        });
});
 
    </script>







 <script>
$(document).ready(function() {
    var apiUrl = $('meta[name="api-url"]').attr("content") + "pro_company";
    var placeholder = "Select company";

    // Fetch data from API for company dropdown
    $.ajax({
        url: apiUrl,
        type: 'GET',
        headers: {
            Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
        success: function(response) {
            if (response.success) {
                var data = response.data.map(function(item) {
                    return {
                        id: item.companycode,
                        text: item.companyname
                    };
                });

                // Initialize select2 with fetched data
                $(".mySelect").select2({
                    data: data,
                    placeholder: placeholder,
                    allowClear: false,
                    minimumResultsForSearch: 5
                });
            } else {
                console.error("API response indicates failure: ", response.message);
            }
        },
        error: function(xhr, status, error) {
            console.error("Error fetching data: ", status, error);
            console.error("Response text: ", xhr.responseText);
        }
    });

    // Fetch procurement details based on employee ID input
    $('#emp_id').on('keyup', function() {
        let Empid = $(this).val();
		if(Empid.length >= 5 ){

        $.ajax({
            url: '{{ env('API_URL') }}GetProcurementDetails',
            method: 'POST',
            data: {
                employeeid: Empid
            },
            success: function(response) {
                if (response && response.success && response.data && response.data.length > 0) {
                    const supplier = response.data[0]; // Access the first element of the data array
                    $('#username').val(supplier.username);
                    $('#phone').val(supplier.phone);
 $('#empl').val(supplier.empno);

                } else {
                    toastr.error('Supplier not found or response data is invalid');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX error:', status, error);
                toastr.error('Error fetching supplier details');
            }
        });
		}
    });

    // Fetch divisions based on company selection
    $('#company').on('change', function() {
        let companycode = $(this).val();
        if (companycode) {
            $.ajax({
                url: '{{ env('API_URL') }}getdivisionlist',
                method: 'POST',
                data: {
                    company: companycode
                },
                success: function(response) {
                    if (response && response.success) {
                        var divisionData = response.data.map(function(item) {
                            return {
                                id: item.comp_no,
                                text: `${item.compname} - ${item.division}`
                            };
                        });

                        divisionData.forEach(function(option) {
                                    $("#division").append(new Option(option.text, option.id, false, false));
                                });

                                // Initialize Select2 (if not already initialized)
                                if (!$("#division").hasClass("select2-hidden-accessible")) {
                                    $("#division").select2({
                                        placeholder: "Select a division",
                                        allowClear: false,
                                        minimumResultsForSearch: 5
                                    });
                                }

                        // Trigger change event to update Select2
                        $("#division").trigger('change');
                    } else {
                        toastr.error('Divisions not found for selected company');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching division data:', status, error);
                    toastr.error('Error fetching division details');
                }
            });
        }
    });

    // Fetch suppliers based on selected divisions
    $('#division').on('change', function() {
        let divisions = $(this).val(); 
        $("#supplier").empty().select2({
            placeholder: "Select a supplier",
            allowClear: true,
            minimumResultsForSearch: 5
        });

        if (divisions && divisions.length > 0) {
            // Store AJAX promises
            var requests = divisions.map(function(division) {
                return $.ajax({
                    url: '{{ env('API_URL') }}supplierlist',
                    method: 'POST',
                    data: { division: division }
                });
            });

            // Wait for all requests to complete
            $.when.apply($, requests).done(function() {
                var supplierData = [];

                // Arguments handling for multiple requests
                var responses = (divisions.length === 1) ? [arguments] : arguments;

                for (var i = 0; i < responses.length; i++) {
                    var response = responses[i][0]; // Get the response data
                    if (response && response.success) {
                        var suppliers = response.data.map(function(item) {
                            return {
                                id: item.ledger_code,
				division: item.division,
                                text: item.name
                            };
                        });
                        supplierData = supplierData.concat(suppliers);
                    } else {
                        toastr.error('Suppliers not found for one of the selected divisions');
                    }
                }

                // Remove duplicate suppliers
                var uniqueSuppliers = supplierData.filter((value, index, self) =>
                    index === self.findIndex((t) => (
                        t.id === value.id && t.text === value.text && t.division === value.division
                    ))
                );

                // Update the supplier dropdown
                $("#supplier").select2({
                    data: uniqueSuppliers,
                    placeholder: "Select a supplier",
                    allowClear: true,
                    minimumResultsForSearch: 5
                });
            }).fail(function(xhr, status, error) {
                console.error('Error fetching supplier data:', status, error);
                toastr.error('Error fetching supplier details');
            });
        }
    });
});



    </script>

@endsection