@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;
            text-align:center !important;
        }
 
        #settlement-list thead th:first-child {
            background-image: none !important;
        }
 
        #settlement-list thead th {
            pointer-events: none;
        } */
 
        #settlement-list {
            border-collapse: collapse;
            width: 100% !important;
        }
 
        #settlement-list th,
        #settlement-list td {
            border: 1px solid black;
            padding: 4px;
            color: black;
            text-align: left;
        }
 
        #settlement-list th {
            background-color: #114680;
            color: white;
            font-size: 15px !important;
        }
 
        #settlement-list td {
            font-size: 14px !important;
        }
 
        .card-header {
            padding: 5px 10px !important;
        }
 
        .card-title {
            color: #114680;
        }
 
        #settlement-list tbody tr:hover {
            background-color: #f2f2f2;
            cursor: pointer;
        }
 
        #settlement-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;
 
        }
 
        .itemidd {
            color: dodgerblue !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;
        }
 
        @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 */
 
        }
    #settlement-list td:nth-child(4) {
    text-align: right;
   }
   #settlement-list td:nth-child(7) {
    text-align: right;
   }
   #settlement-list td:nth-child(8) {
    text-align: right;
   }
   #settlement-list td:nth-child(9) {
    text-align: right;
   }
   .btn-excel {
    color: white !important;
  }

  .excel-button-text {
    color: black !important;
  }
  .dt-button.buttons-pdf, .dt-button.buttons-html5 {
    padding: 2px 9px !important;
}
    </style>
 
 
 
   
 
    <div id="preloder">
        <div class="loader"></div>
    </div>
    <div class="col-md-12 align-top">
        <div class="card border shadow">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">Settlement</h5>
 
 
 
            </div>
            <div class="card-body">
 
                <div class="table-responsive">
 
 
 
                    <table id="settlement-list" class="display compact">
                        <thead>
                            <tr>
                            <th class="text-center sorting_asc">S.No.</th>
                                            <th class="text-center">Invoice No</th>
                                            <th class="text-center">Invoice Date </th>
                                            <th class="text-center">Invoice Amount</th>
                                            <th class="text-center">Cheque No</th>
                                            <th class="text-center">Cheque Date</th>
                                            <th class="text-center">Cheque Amount</th>
                                            <th class="text-center">Debit Note</th>
                                            <th class="text-center">Remaining Amount</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" />
@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>
    <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>
    <script>
        $(document).ready(function() {
            $('#filterButton').click(function() {
                $('#inputGroup').toggle();
                $('#filterButton').hide();
            });
        });
    </script>
 
    <script>
        $(document).ready(function() {
            $("#popup-form").validate({
                rules: {
                    invoiceno: {
                        required: function(element) {
                            return $("#dcno").val() === "";
                        }
                    },
                    invoicedate: {
                        required: function(element) {
                            return $("#dcdate").val() === "";
                        }
                    },
                    dcno: {
                        required: function(element) {
                            return $("#invoiceno").val() === "";
                        }
                    },
                    dcdate: {
                        required: function(element) {
                            return $("#invoicedate").val() === "";
                        }
                    }
                },
                messages: {
                    invoiceno: "Invoice No is required",
                    invoicedate: "Invoice Date is required",
                    dcno: "DC No is required",
                    dcdate: "DC Date is required"
                },
                submitHandler: function(form) {
                    // Serialize form data
                    var formData = $(form).serialize();
 
                    // AJAX POST request to submit form data to the API
                    $.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();
                            console.log(response);
 
                            toastr.success('Form submitted successfully!', '', {
                                onHidden: function() {
                                    // Reload the page after the toaster message disappears
                                    window.location.href =
                                        "{{ route('supplier.po') }}";
                                }
                            });
                        },
                        error: function(xhr, status, error) {
                            toastr.error('Error: ' +
                                error); // Display error toaster message for AJAX failure
                        }
                    });
                }
            });
        });
    </script>
 
    <script></script>
 
 
    <script>
        $(document).ready(function() {
            $("#resetBtn").click(function() {
                location.reload();
            });
        });
    </script>
 
    <script>
        $(document).ready(function() {
            $("#SubmitSearchBtn").click(function() {
                var searchValue = $("#searchFilterInput").val();
                var inputsearch = $("#searchValue").val();
 
                console.log(searchValue);
                $("#searchFilterInput").val('');
 
                if (inputsearch != '') {
                    searchValue += ',' + inputsearch;
                }
 
                $("#searchValue").val(searchValue);
 
                // Automatically ch searceck checkboxes after submittingh
                // Set the checkbox with id "GUP-POY16061608" to checked
                if (searchValue) {
                    $("#" + searchValue).prop("checked", true);
 
 
                    // Check if the checkbox with id "GUP-POY16061608" is checked
 
                    if ($("#" + searchValue).prop("checked")) {
                        var checkboxRow = $("#" + searchValue).closest("tr");
                        // Clone the row
                        var clonedRow = checkboxRow.clone();
                        // Prepend the cloned row to the table body
                        $("#settlement-list tbody").prepend(clonedRow);
                        // Remove the original row
                        checkboxRow.remove();
                    }
 
 
                }
 
            });
        });
    </script>
    <script>
        $(document).ready(function() {
 
            $(document).on("click", ".itemidd", function() {
                // alert("click bound to document listening for #test-element");
 
                var selectedPOs = [];
 
                console.log($(this).data('invoice'));
 
                var invoiceid = $(this).data('invoice');
 
                $.ajax({
                    type: 'GET',
                    url: '{{ env('API_URL') }}' + 'invoice_details',
                    data: {
                        selectedPo: selectedPOs.join('&')
                    },
                    dataType: 'json',
 
                    headers: {
                        "Authorization": "Bearer " + sessionStorage.getItem('token')
                    },
                    beforeSend: function() {
                        // console.log("ssss");
                        $("#preloder").fadeIn();
                    },
                    success: function(response) {
                        $("#preloder").fadeOut();
                        $('#submitbtn1').click()
 
 
 
                        $('#po_noo').html(response.data.header.pono);
                        $('#invoice_no').html(response.data.header.invoiceno);
                        $('#invoicedatee').html(response.data.header.invoicedate);
                        $('#ewaybill').html(response.data.header.ewaybill);
                        $('#lrno').html(response.data.header.dcno);
                        $('#dcdate').html(response.data.header.dcdate);
                        $('#trans_port').html(response.data.header.trnasport);
                        $('#vechileno').html(response.data.header.vehicleno);
 
 
 
                        console.log(response.data.header);
                        $('.poselecteddata').empty();
                        $.each(response.data.details, function(index, value) {
                            // console.log(response.data);
                            $('.poselecteddata').append('<tr>' +
                                '<td>' + (index + 1) + '</td>' +
                                '<td>' + value.pono + '</td>' +
                                '<td>' + value.itemdetails + '</td>' +
                                '<td>' + value.color + '</td>' +
                                '<td>' + value.size + '</td>' +
                                '<td>' + value.uom + '</td>' +
                                '<td>' + value.poqty + '</td>' +
                                '<td>' + value.dcqty + '</td>' +
                                '<td>' + value.pendingqty + '</td>' +
                                '<td>' + value.acceptedqty + '</td>' +
                                '<td>' + value.rejectedqty + '</td>' +
                                '<td>' + value.dispatchedqty + '</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 totalminus = poqty - newValue;
            $(row).find('.penqty').text(totalminus);
            $(row).find('.penqty').val(totalminus);
        }
    </script>
 
    <script src="{{ asset('backend/js/settlement.js') }}"></script>
@endsection