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

/* Add padding to PDF button */
.dt-button.buttons-pdf,
.dt-button.buttons-html5 {
    padding: 2px 9px !important;
}


.fa-file-excel:before {
    color: #1D6F42;
}

.custom-modal-dialog {
    max-width: 1060px !important;
}

.modal-body {
    font-size: 11px !important;
    font-family: Verdana, Arial, Helvetica !important;
    color: black !important;
}

.dataTables_wrapper .dataTables_length {
    margin-bottom: 11px;
}




#supplier-po {
    border-collapse: collapse;
    width: 100% !important;
}

#supplier-po th,
#supplier-po td {
    border: 1px solid black;
    padding: 4px;
    color: black;
    text-align: left;
}

#supplier-po th {
    background-color: #114680;
    color: white;
    font-size: 15px !important;
}

#supplier-po td {
    font-size: 14px !important;
}

.card-header {
    padding: 5px 10px !important;
}

.card-title {
    color: #114680;
}

#supplier-po tbody tr:hover {
    background-color: #f2f2f2;
}

#supplier-po_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: 0px
}

.frmSearch {
    position: absolute;
    z-index: 31;
    background: white;
    width: 300px;
}

#SubmitSearchBtn {
    background-color: #4FA3D2;
    color: #ffff;
}

#generateBtn {
    background-color: #4FA3D2;
    color: #ffff;
}

@media (max-width: 575.98px) {
    .mob_viewalign {
        margin-top: 44px;
    }

    #SubmitSearchBtn {
        margin-left: 32px;
    }

    .mob_generate {
        margin-top: 10px;
    }

    .frmSearch {
        width: 263px;
    }
}

.option:hover {
    background-color: #f0f0f0;
    /* Change this to the desired hover color */

}

#supplier-po td:nth-child(5) {
    text-align: right;
}

.dcqty {
    width: 73px !important;
}

.form-select {
    font-size: 13px !important;
    padding: 5px !important;
    border-radius: 2px !important;
}

.poselecteddata td:nth-child(8) input {
    text-align: right !important;
}

.poselecteddata td:nth-child(11) {
    text-align: right !important;
}

.poselecteddata td:nth-child(10) {
    text-align: right !important;
}

.poselecteddata td:nth-child(13) {
    text-align: right !important;
}

.poselecteddata td:nth-child(12) span {

    text-align: right !important;
}

.table td,
.table th {
    padding: 6px !important;
}

#inputGroup {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    top: 50px;
    z-index: 1011;
    background-color: white;
    /* Ensure background color to avoid transparency */
    padding: 10px;
    margin-right: 15px;
    margin-left: 15px !important;
}

.btn-excel {
    color: white !important;
}

.excel-button-text {
    color: black !important;
}

.error-msg {
    color: red;
    display: none;
}

.disabled-btn {
    pointer-events: none;
    opacity: 0.5;
}

#invoiceamount {
    text-align: right;
}

.filtercolor {
    background-color: #e2eff6 !important;
    justify-content: center;
    align-items: center;

}

 .posearch {
    margin-bottom: 0rem !important;
    position: absolute;
    margin-top: -15px;
    width: 195px;
} 
.color_code {
            display: flex;
            align-items: center;
        }
        .color-box {
            width: 17px;
            height: 17px;
           
            margin-right: 10px;
        }


</style>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered custom-modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLabel">Dispatch Details</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form method="POST" action="" id="popup-form">
                        @csrf
                        <div class="row">

                            <div class="col-md-1 label_align label_align_center">
                                PO No.
                            </div>
                            <div class="col-md-11 showpo_number" id="selectedPODisplay">
                                <input type="hidden" name="po_no" class="selectedPODisplay">
                                <b>20240001</b>
                            </div>
                        </div>


                        <div class="container pt-4">
                            <div class="table-responsive">
                                <table class="table table-bordered form-align" id="popuptable">

                                    <thead>
                                        <tr id="space-th">
                                            <th class="text-center ">S.No</th>
                                            <th class="text-center ">PO No.</th>

                                            <th class="text-center">Item </th>
                                            <th class="text-center">Color</th>
                                            <th class="text-center">Size </th>
                                            <th class="text-center">PO Qty</th>
                                            <th class="text-center">UOM</th>
                                            <!-- <th class="text-center">DC Qty</th> -->
                                            <th class="text-center">Accepted Qty</th>
                                            <th class="text-center">Rejected Qty</th>
                                            <th class="text-center">Pending Qty</th>
                                            <th class="text-center">Dispatched Qty</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody" class="poselecteddata">
                                        <!-- Table rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Submit button -->
                        <!-- <div class="row mt-3">
                            <div class="col-md-12 text-center">
                                <button class="btn btn-sm btn-primary" id="submit" type="submit">Submit</button>
                            </div>
                        </div> -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row ml-2 filtercolor" id="inputGroup">
  <div class="col-md-2 col-sm-12">
        <div class="form-group posearch">
          <!--  <input type="text" id="searchFilterInput" class="form-control" placeholder="Buyer Name" />
            <div id="suggesstion-box" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); cursor: pointer;"></div>  -->
 	<select class="form-select" id="buyerDropdown">
        </select>
        </div>

    </div>

    <input type="hidden" value="" id="searchValue" name="searchValue">

    <div class="col-md-2 col-sm-12">
        <select class="form-select" id="itemDropdown">
            <!-- Options will be dynamically populated -->
        </select>
    </div>

    <div class="col-md-2 col-sm-12">
        <select class="form-select" id="colorDropdown">
            <!-- Options will be dynamically populated -->
        </select>
    </div>

    <div class="col-md-2 col-sm-12">
        <select class="form-select" id="sizeDropdown">
            <!-- Options will be dynamically populated -->
        </select>
    </div>

    <div class="col-md-2 col-sm-12 mt-1" id="newCardContainer"></div>

    <!-- <div class="col-md-2 col-sm-12">
        <div class="form-inline">
            <button class="btn btn-sm" id="SubmitSearchBtn">Apply Filter</button>
            <span style="margin-right: 10px;"></span>
            <button class="btn btn-sm btn-danger" id="resetBtn">Reset Filter</button>
        </div>
    </div> -->

    <div class="col-md-2 col-sm-12 text-right">
        <button class="btn btn-sm" id="generateBtn">View</button>
        <button class="btn btn-sm btn-primary" id="submitbtn1" data-toggle="modal" data-target="#myModal"
            style="display:none">Generate12</button>
    </div>
</div>

<div id="preloder">
    <div class="loader"></div>
</div>

<!-- individual popup -->

<div class="modal fade" id="single_po" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered custom-modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLabel">PO Details <span id="buyerr_name"></span></h6>
                <button type="button" class="close" data-dismiss="modal" id="closeModalBtn" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form method="POST" action="" id="">
                        @csrf
                        <div class="container pt-4">
                            <div class="">
                                <div class="row mb-3">
                                    <div class="col-1" style="font-weight:bold;">PO NO:</div>
                                    <div class="col-3" id="po_single"></div>
                                  <div class="col-1" style="font-weight:bold;">PO Date:</div>
                                    <div class="col-3" id="podateee"></div>
									 <div class="col-1" style="font-weight:bold;">Status:</div>
                                    <div class="col-3" id="status_single"></div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-1" style="font-weight:bold;">Req Date:</div>
                                    <div class="col-3" id="requ_single"></div>
                                    <div class="col-1" style="font-weight:bold;">Committed Date:</div>
                                    <div class="col-3" id="commite_single"></div>

                                   
                                </div>



                                <table class="table table-bordered form-align" id="single_po">

                                    <thead>
                                        <tr id="space-th">
                                            <th class="text-center sorting">S.No</th>
                                            <th class="text-center sorting">PO No.</th>
                                            <th class="text-center">Item</th>
                                            <th class="text-center">Color</th>
                                            <th class="text-center">Size</th>
                                            <th class="text-center">PO Qty</th>
                                            <th class="text-center">UOM</th>
                                            <!-- <th class="text-center">DC Qty</th> -->
                                            <th class="text-center">Accepted Qty</th>
                                            <th class="text-center">Rejected Qty</th>
                                            <th class="text-center">Pending Qty</th>
                                            <th class="text-center">Dispatched Qty</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody" class="poselecteddata1">
                                        <!-- Table rows -->
                                    </tbody>
                                </table>
                                <div class="row">
                                <div class="col-4" style="font-weight:bold;">Supplier acknowledged commitment date on:</div>
                                    <div class="col-2" id="supplierack"></div>
                                    <div class="col-4" id="supplierack1"></div>
                                
                                    <div class="col-4" id="buyerCommitmentLabel" style="font-weight:bold; display:none;">Buyer revised commitment date on:</div>
                                    <div class="col-2" id="procurmentack"></div>
                              
                            </div>
                            </div>
                        </div>
                        <!-- Submit button -->
                        <!-- <div class="row mt-3">
                            <div class="col-md-12 text-center">
                                <button class="btn btn-sm btn-primary" id="submit" type="submit">Submit</button>
                            </div>
                        </div> -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- individual end -->

<div class="col-md-12 align-top">
    <div class="card border shadow">
        <div class="card-header bg-light">
            <h5 class="card-title mb-0">Purchase Order</h5>



        </div>
        <div class="card-body">

            <div class="table-responsive">




                <table id="supplier-po" class="display compact">
                <div class="container color_code" style="justify-content: right">
        <div class="color-box" id="colorBox" style="background-color: #7a807a26 !important;"></div>
        <span>PO acknowledgement pending</span>
        <div class="color-box ml-3" id="colorBox" style="background-color: #ffcfcf;"></div>
        <span>PO not acknowledged within 2 days</span>
        <div class="color-box ml-3" id="colorBox" style="background-color: #FFC5B0;"></div>
        <span>PO exceeds commitment date</span>
    </div>
                    <thead>
                        <tr>
                            <th>S.No.</th>
                            <th></th>
                            <th>PO No.</th>
                            <th>PO Date</th>
                            <th>PO Amount</th>
                            <th>PO Contact Person</th>
                            <!-- <th>GRN Count</th>  -->
                            <th>Requested date</th>
                            <th>Committed date</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
</div>
@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" />
<style>
     .greencolor {
            background-color: #7a807a26 !important;
            color: white;
        }


        .redcolor {
            background-color: #ff0d0d33 !important;
            color: white;
        }

        .whitecolor {
            background-color: white !important;
            color: white;
        }
    </style>
@endsection

@section('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://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.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>
<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/toastr.js/latest/css/toastr.min.css">

<script>
$(document).ready(function() {
    $.ajax({
        url: '{{ env('API_URL') }}' + 'procurementemployee',
        method: 'POST',
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + sessionStorage.getItem('token')
        },
        success: function(response) {
            if (response.data && response.data.length > 0) {
                console.log(response.data);

                let uniqueBuyers = [...new Set(response.data.map(item => item.buyername))];

                var buyerDropdown = $('#buyerDropdown');
                buyerDropdown.empty();
                buyerDropdown.append($('<option></option>').attr('value', '').text('SupplierName'));

                uniqueBuyers.forEach(function(buyer) {
                    buyerDropdown.append($('<option></option>').attr('value', buyer).text(buyer));
                });

                buyerDropdown.on('change', function() {
                    var selectedBuyer = $(this).val();

                    $("#supplier-po tbody input[type=checkbox]").prop("checked", false);

                    var filteredData = response.data.filter(item => item.buyername === selectedBuyer);
                    var uniquePonum = [...new Set(filteredData.map(item => item.pono))];

                    uniquePonum.forEach(function(po) {
                        var poSelector = "#" + po.replace(/[, ]+/g, "");
                        $(poSelector).prop("checked", true);
                        if ($(poSelector).prop("checked")) {
                            var checkboxRow = $(poSelector).closest("tr");
                            var clonedRow = checkboxRow.clone();
                            $("#supplier-po tbody").prepend(clonedRow);
                            checkboxRow.remove();
                        }
                    });
                });
            } else {
                console.error('Unexpected API response structure:', response);
            }
        },
        error: function(error) {console.log('error');console.log(error);
            console.error('Error fetching data:', error);
        }
    });
});
</script>

<script>

$(document).ready(function() {
    var selectedItemCode,
    selectedColorCode; 

  
    $.ajax({
        url: '{{ env('API_URL') }}' + 'procurefilter',
        method: 'POST',
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + sessionStorage.getItem('token')
        },
        success: function(response) {
            if (response.data && response.data[0]) {
                var items = response.data[0].item;

               
                var itemDropdown = $('#itemDropdown');
                itemDropdown.empty();
                itemDropdown.append($('<option></option>').attr('value', '').text(
                'Item')); 

                
                items.forEach(function(item) {
                    itemDropdown.append($('<option></option>').attr('value', item.code)
                        .text(item.name));
                });

                itemDropdown.trigger('change');
            } else {
                console.error('Unexpected API response structure:', response);
               
            }
        },
        error: function(error) {
            console.error('Error fetching data:', error);
           
        }
    });

    $('#buyerDropdown').change(function() {  
        
       var  supplier_code = $(this).val();

        
        $.ajax({
            url: '{{ env('API_URL') }}' + 'procurefilter',
            method: 'POST',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                "Authorization": "Bearer " + sessionStorage.getItem('token')
            },
            data: {                
                supplier_code : supplier_code
            },
            success: function(response) {
                if (response.data && response.data[0]) {
                var items = response.data[0].item;

               
                var itemDropdown = $('#itemDropdown');
                itemDropdown.empty();
                itemDropdown.append($('<option></option>').attr('value', '').text(
                'Item')); 

                
                items.forEach(function(item) {
                    itemDropdown.append($('<option></option>').attr('value', item.code)
                        .text(item.name));
                });

                //itemDropdown.trigger('change');
            } else {
                console.error('Unexpected API response structure:', response);
               
            }
            },
            error: function(error) {
                console.error('Error fetching colors:', error);
                // Handle error here
            }
        });
    });
    
    $('#itemDropdown').change(function() {
        selectedItemCode = $(this).val(); 
       var  supplier_code = $('#buyerDropdown').val(); 

        
        $.ajax({
            url: '{{ env('API_URL') }}' + 'procurefilter',
            method: 'POST',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                "Authorization": "Bearer " + sessionStorage.getItem('token')
            },
            data: {
                item_id: selectedItemCode,
                supplier_code : supplier_code
            },
            success: function(response) {
                if (response.data && response.data[0]) {
                    var colors = response.data[0].color;

                    
                    var colorDropdown = $('#colorDropdown');
                    colorDropdown.empty(); 
                    colorDropdown.append($('<option></option>').attr('value', '').text(
                        'Color'));

                    
                    colors.forEach(function(color) {
                        colorDropdown.append($('<option></option>').attr('value',
                            color.code).text(color.name));
                    });

                    
                    colorDropdown.trigger('change');

                   
                    applyFilter({
                        item_id: selectedItemCode,
                        color_id: colorDropdown.val(),
                        supplier_code:supplier_code
                        
                    });
                } else {
                    console.error('Unexpected API response structure:', response);
                   
                }
            },
            error: function(error) {
                console.error('Error fetching colors:', error);
                // Handle error here
            }
        });
    });

    
    $('#colorDropdown').change(function() {
        selectedColorCode = $(this).val(); 
        var  supplier_code = $('#buyerDropdown').val(); 

        
        $.ajax({
            url: '{{ env('API_URL') }}' + 'procurefilter',
            method: 'POST',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                "Authorization": "Bearer " + sessionStorage.getItem('token')
            },
            data: {
                color_id: selectedColorCode,
                item_id: selectedItemCode ,
                supplier_code:supplier_code
            },
            success: function(response) {
                if (response.data && response.data[0]) {
                    var sizes = response.data[0].size;

                    
                    var sizeDropdown = $('#sizeDropdown');
                    sizeDropdown.empty(); 
                    sizeDropdown.append($('<option></option>').attr('value', '').text(
                        'Size')); 

                    
                    sizes.forEach(function(size) {
                        sizeDropdown.append($('<option></option>').attr('value',
                            size.code).text(size.name));
                    });

                    
                    sizeDropdown.trigger('change');
                } else {
                    console.error('Unexpected API response structure:', response);
                    
                }
            },
            error: function(error) {
                console.error('Error fetching sizes:', error);
                
            }
        });
    });

   
    $('#sizeDropdown').change(function() {
        var selectedSizeCode = $(this).val();
        var  supplier_code = $('#buyerDropdown').val(); 


       
        applyFilter({
            item_id: selectedItemCode,
            color_id: selectedColorCode,
            size_id: selectedSizeCode,
            supplier_code:supplier_code
        });
    });

    function applyFilter(data) {
        $.ajax({
            url: '{{ env('API_URL') }}' + 'procurefilter',
            method: 'POST',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                "Authorization": "Bearer " + sessionStorage.getItem('token')
            },
            data: data,
            beforeSend: function() {
                $("#preloder").fadeIn();
            },
            success: function(response) {
                $("#preloder").fadeOut();
                if (response.data && response.data[0]) {
                    var ponum = response.data[0].podata;
                    // Remove duplicates from podata
                    var uniquePonum = [...new Set(ponum)];
                    var datastr = uniquePonum.join(', ');

                    $("#searchValue").val(datastr);

                    // Assuming you want to display a new card with the total_qty
                    var totalQty = response.data[0].total_qty;
                    var uom = response.data[0].uom;
                    console.log(uom);
                    var newCardHtml = '<div class="">';
                    if (totalQty != 0.000) {
                        newCardHtml +=
                            '<p class="card-text" style="text-wrap: nowrap;">Total Pending Qty: <strong>' +
                            totalQty + '</strong> ' + uom + '</p>';
                    }

                    // Update the newCardContainer with the new card HTML
                    $("#newCardContainer").html(newCardHtml);

                    // Uncheck all checkboxes first
                    $("#supplier-po tbody input[type=checkbox]").prop("checked", false);

                    // Check the relevant checkboxes
                    uniquePonum.forEach(function(po) {
                        var poSelector = "#" + po.replace(/[, ]+/g, "");
                        $(poSelector).prop("checked", true);
                        if ($(poSelector).prop("checked")) {
                            var checkboxRow = $(poSelector).closest("tr");
                            var clonedRow = checkboxRow.clone();
                            $("#supplier-po tbody").prepend(clonedRow);
                            checkboxRow.remove();
                        }
                    });

                } else {
                    console.error('Unexpected API response structure:', response);
                   
                }
            },
            error: function(error) {
                console.error('Error applying filter:', error);
                
            }
        });
    }
});
</script>

<script>
//po wise filter
$(document).ready(function() {
    $("#searchFilterInput").keyup(function() {
        var searchValue = $(this).val();
        $.ajax({
            type: "POST",
            url: '{{ env('API_URL') }}' + 'supplierdataselect',
            data: {
                key: searchValue
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                "Authorization": "Bearer " + sessionStorage.getItem('token')
            },
            beforeSend: function() {
                $("#searchFilterInput").css("background",
                    "#FFF url('img/LoaderIcon.gif') no-repeat right 10px center");
                $("#searchFilterInput").css("background-size", "20px 20px");
            },
            success: function(response) {
                $("#suggesstion-box").empty(); 
                $("#suggesstion-box").show();
                $.each(response.data, function(index, option) {
                    var escapedOption = option.replace(/"/g, '&quot;').replace(/'/g,
                        "\\'");
                    $("#suggesstion-box").append(
                        "<div class='option' data-value='" + escapedOption +
                        "' onclick='selectPono(\"" + escapedOption + "\")'>" +
                        escapedOption + "</div>");
                });
                $("#searchFilterInput").css("background", "#FFF");
                $("#suggesstion-box").css({
                    "height": "200px",
                    "overflow-x": "auto",
                    "border": "1px solid #dddddd",
                    "background": "#ffffff",
                    "color": "#333333",
                    "cursor": "pointer",
                    "white-space": "nowrap"
                });
            }
        });
    });
});

function selectPono(val) {
    $("#searchFilterInput").val(val);
    $("#suggesstion-box").hide();

  
    $("#" + val).prop("checked", true);

    if ($("#" + val).prop("checked")) {
        var checkboxRow = $("#" + val).closest("tr");
    
        var clonedRow = checkboxRow.clone();
        
        $("#supplier-po tbody").prepend(clonedRow);
        checkboxRow.remove();
    }
}
</script>



<script>
$(document).ready(function() {

   
    $(document).on('click', '.popup-trigger', function() {
        var pono = $(this).data('pono');
        var podate = $(this).data('podate');
        var buyername = $(this).data('buyername');
        var request_single = $(this).data('reqdate');
        var committed_single = $(this).data('commitedate');
        var status_single = $(this).data('status');
        $('#buyerr_name').text(buyername);
        $('#podateee').text(podate);
        $('#po_single').text(pono);
        $('#requ_single').text(request_single);
        $('#commite_single').text(committed_single);
        $('#status_single').text(status_single);

        
        $.ajax({
            type: 'GET',
            url: '{{ env('API_URL') }}' + 'procurement_po_view/' + pono,
            data: {
                selectedPo: pono
            },
            dataType: 'json',

            headers: {
                "Authorization": "Bearer " + sessionStorage.getItem('token')
            },
            beforeSend: function() {
                $("#preloder").fadeIn();
            },
            success: function(response) {
                $("#preloder").fadeOut();

                $('.poselecteddata1').empty();
                $.each(response.data, function(index, value) {

                    $("#formattedNumber").text(formattedNumber);
                    var number = value.poqty;
					 var suppliertrack = value.supplierack;
                     $("#supplierack").text(suppliertrack);
                    $("#supplierack1").text(suppliertrack);
                    var procurmentackdate = value.procurmentack;
                    if (procurmentackdate) {
                        $("#procurmentack").text(procurmentackdate).show();
                        $("#buyerCommitmentLabel").show();
                        $("#supplierack").show();
                        $("#supplierack1").hide();
                    } else {
                        $("#procurmentack").hide();
                        $("#buyerCommitmentLabel").hide();
                        $("#supplierack").hide();
                        $("#supplierack1").show();
                    }
                    var formattedNumber = value.poqty;
                    $('.poselecteddata1').append('<tr>' +
                        '<td>' + (index + 1) + '</td>' +
                        '<td> <input type="hidden" value="' + value
                        .pono + '" name="pono[]" class="pono">' + value
                        .pono + '</td>' +
                        '<input type="hidden" value="' + value.itemid +
                        '" name="itemid[]" class="itemid">' +

                        '<td><input type="hidden" value="' + value
                        .item + '" name="itemval[]" class="itemval">' +
                        value.item + '</td>' +
                        '<td><input type="hidden" value="' + value
                        .color + '" name="color[]" class="color">' +
                        value.color + '</td>' +
                        '<td><input type="hidden" value="' + value
                        .size + '" name="size[]" class="size">' + value
                        .size + '</td>' +
                        '<td style="text-align: right;"><input type="hidden" value="' +
                        value.poqty +
                        '" name="poqty[]" class="poqty">' +
                        formattedNumber + '</td>' +
                        '<td><input type="hidden" value="' + value.uom +
                        '" name="uom[]" class="uom">' + value.uom +
                        '</td>' +
                        // '<td><input type="number" value="" placeholder="0"  min="0"  name="dcqty[]" class="dcqty" oninput="handleChange(this)"></td>' +
                        '<td><input type="hidden" value="' + value
                        .Accepted_Qty +
                        '" name="accepet_qty[]" class="accepet_qty">' +
                        value.Accepted_Qty + '</td>' +
                        '<td><input type="hidden" value="' + value
                        .Rejected_Qty +
                        '" name="rejectqty[]" class="rejectqty">' +
                        value.Rejected_Qty + '</td>' +

                        '<input type="hidden"  value="' + value.sizeid +
                        '" name="sizeid[]" class="sizeid">' +
                        '<input type="hidden"  value="' + value
                        .colorid +
                        '" name="colorid[]" class="colorid">' +
                        '<td style="text-align: right;"><input type="hidden"  value="' +
                        value.Pen_Qty +
                        '" name="penqty[]" id="penq"class="penqty"><span class="penqty">' +
                        value.Pen_Qty + '</span></td>' +
                        '<td style="text-align: right;"><input type="hidden" value="' +
                        value.dispatchqty +
                        '" name="dispatchqty[]" class="dispatchqty">' +
                        value.dispatchqty + '</td>' +

                        '</tr>');
                });
            },
            error: function(xhr, status, error) {
                toastr.error('Error: ' + error);
            }
        });
        // You can use 'pono' to fetch data if needed and update modal content here
        $('#single_po').modal('show');

        $('#closeModalBtn').click(function() {
            $('#single_po').modal('hide');
        });
    });
});
</script>


<script>
$(document).ready(function() {
    $('#filterButton').click(function() {
        $('#inputGroup').toggle();
        $('#filterButton').hide();
    });
});


var now = new Date(),
    maxDate = now.toISOString().substring(0, 10);
$('#dcdate').prop('max', maxDate);
$('#invoicedate').prop('max', maxDate);
</script>




<script>
function fetchExistingInvoiceNumbers(inputVal) {
    console.log("Fetching existing invoice numbers for:", inputVal);

    $.ajax({
        type: "POST", 
        url: '{{ env('API_URL') }}invoiceDuplication', 
        dataType: 'json',
        headers: {
            "Authorization": "Bearer " + sessionStorage.getItem('token')
        },
        data: {
            invoiceno: inputVal
        },
        success: function(response) {
            console.log("AJAX request successful. Response:", response);

            if (response.success) {
                console.log("Fetched data:", response.data.msgstatus);

                // Check the msgstatus directly
                if (response.data.msgstatus === 1) {
                    $("#duplicate-error").show();
                    $("#submit").addClass("disabled-btn");

                } else {
                    $("#duplicate-error").hide();
                    $("#submit").removeClass("disabled-btn");
                }
            } else {
                console.error("Failed to fetch existing invoice numbers:", response.error);
                $("#duplicate-error").hide();
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX request failed:", error);
            $("#duplicate-error").hide();
        }
    });
}

$(document).ready(function() {
    $("#invoiceno").on("keyup", function() {
        var inputVal = $(this).val();
        console.log("Keyup event triggered. Input value:", inputVal);

        if (inputVal) {
            fetchExistingInvoiceNumbers(inputVal);
        } else {
            $("#duplicate-error").hide();
        }
    });
});
</script>

<script>
$(document).ready(function() {
    $('#invoiceno').on('input', function() {
        this.value = this.value.toUpperCase();
    });


    $("#popup-form").validate({

        rules: {
            invoiceno: {
                required: true,
            },
            invoicedate: {
                required: true,
            },

            trnmode: {
                required: true,
            }
        },
        messages: {
            invoiceno: "Invoice No is required",
            invoicedate: "Invoice Date is required",
            trnmode: "Please Select Transport Mode select"


        },
        submitHandler: function(form) {
        
            var formData = $(form).serialize();

            $.ajax({
                type: "POST",
                url: '{{ env('API_URL') }}' + 'supplier_invoice',
                data: formData,
                dataType: 'json',
                headers: {
                    "Authorization": "Bearer " + sessionStorage.getItem('token')
                },
                beforeSend: function() {
                    $("#preloder").fadeIn();
                },
                success: function(response) {

                    $("#preloder").fadeOut();
                    if (response.success) {
                        toastr.success('Form submitted successfully!')
                        window.location.href = "{{ route('supplier.po') }}";
                    } else {
                        toastr.error(
                            'Form submitted failed. Please try again.'
                            ); 
                    }
                },
                error: function(xhr, status, error) {
                    $("#preloder").fadeOut();
                    toastr.error('Error: ' +
                    error);
                }
            });
        }
    });
});
</script>
<script>
$(document).ready(function() {
    $('#generateBtn').click(function() {
       
        var selectedPOs = [];
        $('input[type="checkbox"]:checked').each(function() {
            var value = $(this).val();
            selectedPOs.push(value); 

        });
       
        $('#selectedPODisplay b').text(selectedPOs.join(', '));
        $('.selectedPODisplay').val(selectedPOs.join(', '));

        if ($('input[type="checkbox"]:checked').length === 0) {

            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Please select at least one checkbox.',
                showConfirmButton: true
            })
        } else {
            


            $.ajax({
                type: 'GET',
                url: '{{ env('API_URL') }}' + 'procurement_po_view/' + selectedPOs.join('&'),
                data: {
                    selectedPo: selectedPOs.join('&')
                },
                dataType: 'json',

                headers: {
                    "Authorization": "Bearer " + sessionStorage.getItem('token')
                },
                beforeSend: function() {
                    
                    $("#preloder").fadeIn();
                },
                success: function(response) {
                    $("#preloder").fadeOut();
                    $('#submitbtn1').click()
                    $('.poselecteddata').empty();
                    $.each(response.data, function(index, value) {

                        $("#formattedNumber").text(formattedNumber);
                        var number = value.poqty;
                        var formattedNumber = value.poqty;
                        $('.poselecteddata').append('<tr>' +
                            '<td>' + (index + 1) + '</td>' +
                            '<td> <input type="hidden" value="' + value
                            .pono + '" name="pono[]" class="pono">' + value
                            .pono + '</td>' +
                            '<input type="hidden" value="' + value.itemid +
                            '" name="itemid[]" class="itemid">' +

                            '<td><input type="hidden" value="' + value
                            .item + '" name="itemval[]" class="itemval">' +
                            value.item + '</td>' +
                            '<td><input type="hidden" value="' + value
                            .color + '" name="color[]" class="color">' +
                            value.color + '</td>' +
                            '<td><input type="hidden" value="' + value
                            .size + '" name="size[]" class="size">' + value
                            .size + '</td>' +
                            '<td style="text-align: right;"><input type="hidden" value="' +
                            value.poqty +
                            '" name="poqty[]" class="poqty">' +
                            formattedNumber + '</td>' +
                            '<td><input type="hidden" value="' + value.uom +
                            '" name="uom[]" class="uom">' + value.uom +
                            '</td>' +
                            // '<td><input type="number" value="" placeholder="0"  min="0"  name="dcqty[]" class="dcqty" oninput="handleChange(this)"></td>' +
                            '<td><input type="hidden" value="' + value
                            .Accepted_Qty +
                            '" name="accepet_qty[]" class="accepet_qty">' +
                            value.Accepted_Qty + '</td>' +
                            '<td><input type="hidden" value="' + value
                            .Rejected_Qty +
                            '" name="rejectqty[]" class="rejectqty">' +
                            value.Rejected_Qty + '</td>' +

                            '<input type="hidden"  value="' + value.sizeid +
                            '" name="sizeid[]" class="sizeid">' +
                            '<input type="hidden"  value="' + value
                            .colorid +
                            '" name="colorid[]" class="colorid">' +
                            '<td style="text-align: right;"><input type="hidden"  value="' +
                            value.Pen_Qty +
                            '" name="penqty[]" id="penq"class="penqty"><span class="penqty">' +
                            value.Pen_Qty + '</span></td>' +
                            '<td style="text-align: right;"><input type="hidden" value="' +
                            value.dispatchqty +
                            '" name="dispatchqty[]" class="dispatchqty">' +
                            value.dispatchqty + '</td>' +

                            '</tr>');
                    });
                },
                error: function(xhr, status, error) {
                    toastr.error('Error: ' + error);
                }
            });
        }
    });
});
</script>
<script>
function handleChange(input) {
    var row = $(input).closest('tr');
    var newValue = input.value;
    var poqty = $(row).find('.poqty').val();
    var penqty = $(row).find('.penqty').val();
    var accepet_qty = $(row).find('.accepet_qty').val();
    var dispatchqty = $(row).find('.dispatchqty').val();
    var totalminus = poqty - newValue;
    if (dispatchqty != '' && dispatchqty > 0) {

        var totalminus = poqty - newValue - dispatchqty;

    }
    if ((dispatchqty == 0) && (accepet_qty != '' && accepet_qty > 0)) {
        var totalminus = poqty - newValue - accepet_qty;
    }
    console.log(penqty)
    
    $(row).find('.penqty').val(totalminus);
}
</script>



<script src="{{ asset('backend/js/pro-dash.js') }}"></script>
@endsection