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

        #auditinvoicelist td:nth-child(4) {
            text-align: right;
        }

        #auditinvoicelist td:nth-child(8) {
            text-align: right;
        }

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

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

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

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

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

        .card-title {
            color: #114680;
        }

        #auditinvoicelist tbody tr:hover {
            background-color: #f2f2f2;

        }


        #invoice-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;
            cursor: pointer;
        }

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

        @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 */

        }

        .poselecteddata td:nth-child(8),
        .poselecteddata td:nth-child(6),
        .poselecteddata td:nth-child(9),
        .poselecteddata td:nth-child(10),
        .poselecteddata td:nth-child(11),
        .poselecteddata td:nth-child(12) {
            text-align: right !important;
        }

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

        }



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

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

        .dt-button.buttons-pdf,
        .dt-button.buttons-html5 {
            padding: 2px 9px !important;
        }

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

        

        #invoice-list_filter {
            margin-top: -47px
        }

        /* @media (max-width: 992px) {
            .dt-buttons {
                margin-top: 0;
            }

            #invoice-list_filter {
                margin-top: 0;
            }
        }

        @media screen and (max-width: 1024px) {

            .dt-buttons {
                margin-top: -49px;

            }

            #invoice-list_filter {
                margin-top: -56px;

            }

        }

        @media (max-width: 768px) {
            .dt-buttons {
                margin-top: 0;

            }

            #invoice-list_filter {
                margin-top: 0;

            }
        } */

        #max {
            width: auto !important;
        }

        #min {
            width: auto !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">PO Details</h5>



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

                <div class="table-responsive">


                    <table id="auditinvoicelist" class="display compact">
                        <thead>
                            <tr>
                            <th>S.No.</th>
                            <th>Invoice No.</th>
                                <th>Invoice Date</th>
                                <th>Invoice Value</th>
                                <th>Status</th>
                                <th>Debit Note No</th>
                                <th>Date</th>
                                <th>Value</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/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 src="{{ asset('backend/js/invoiceaudit.js') }}"></script>
@endsection