@extends('layouts.customapp')

@section('content')
    <!-- Navbar Start -->
    <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;
        }

        #home-data thead th:first-child {
            background-image: none !important;
        }

        #home-data thead th {
            pointer-events: none;
        }

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

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

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

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

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

        .card-title {
            color: #114680;
        }

        #home-data tbody tr:hover {
            background-color: #f2f2f2;
            cursor: pointer;
        }

        #home-data_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 */

        }

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

        #home-data td:nth-child(7) {
            text-align: right;
        }

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

        #home-data 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>
<style>
    .order, .purchase, .invoice, .settlement {
            border:none !important;
            cursor: pointer;
        }
        </style>
    <!-- Sale & Revenue Start -->
    <!-- Sales Chart Start -->
    <div class="container-fluid pt-4 px-4">
        <div class="row">
            <!-- Total Orders Card -->
            <div class="mt-6 col-xl-3 col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-body order  bg-light rounded" style="height: 165px;">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <a class="mb-2" href="{{ route('supplier.po') }}">
                                <div>
                                    <h4 class="mb-0">Total POs</h4>
                                </div>
                            </a>
                            
                            <div class="icon-shape icon-md bg-light-info text-info rounded-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor">
        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"></path>
    </svg>
</div>

                        </div>
                        <div>
                            <h1 id="total-orders-amount" class="fw-bold"></h1>
                            <p class="mb-0">
                                <span id="total-orders-count" class="text-dark me-2"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Purchase Order Card -->
            <div class="mt-6 col-xl-3 col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-body purchase  bg-light rounded" style="height: 165px;">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <a class="mb-2" href="{{ route('supplier.po') }}">
                                <div>
                                    <h4 class="mb-0">Pending POs</h4>
                                </div>
                            </a>
                            <div class="icon-shape icon-md bg-light-primary text-primary rounded-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor">
        <path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z"></path>
    </svg>
</div>

                        </div>
                        <div>
                            <h1 id="po-amount" class="fw-bold"></h1>
                            <p class="mb-0">
                                <span id="po-count" class="text-dark me-2"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Card -->
            <div class="mt-6 col-xl-3 col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-body invoice  bg-light rounded" style="height: 165px;">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <a class="mb-2" href="{{ route('supplier.invoice') }}">
                                <div>
                                    <h4 class="mb-0">Invoice</h4>
                                </div>
                            </a>
                            <div class="icon-shape icon-md bg-light-info text-info rounded-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor">
        <path fill-rule="evenodd" d="M2 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5H2zM3 3H2v1h1V3z"></path>
        <path d="M5 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM5.5 7a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 4a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9z"></path>
        <path fill-rule="evenodd" d="M1.5 7a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V7zM2 7h1v1H2V7zm0 3.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H2zm1 .5H2v1h1v-1z"></path>
    </svg>
</div>

                        </div>
                        <div>
                            <h1 id="invoice-amount" class="fw-bold"></h1>
                            <p class="mb-0">
                                <span id="invoice-count" class="text-dark me-2"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Settlement Card -->
            <div class="mt-6 col-xl-3 col-lg-6 col-md-12 col-12">
                <div class="card">
                    <div class="card-body settlement bg-light rounded" style="height: 165px;">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <a class="mb-2" href="{{ route('supplier.settlement') }}">
                                <div>
                                    <h4 class="mb-0">Settlement</h4>
                                </div>
                            </a>
                            <div class="icon-shape icon-md bg-light-info text-info rounded-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
        <path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
        <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path>
        <path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
    </svg>
</div>

                        </div>
                        <div>
                            <h1 id="settlement-amount" class="fw-bold"></h1>
                            <p class="mb-0">
                                <span id="settlement-count" class="text-dark me-2"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Sales Chart End -->
    <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">Over due POs</h5>



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

                <div class="table-responsive">



                    <table id="home-data" class="display compact">
                        <thead>
                            <tr>
                                <th>S.No.</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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // Function to fetch data from API
        function fetchTotalOrders() {
            $.ajax({
                url: '{{ env('API_URL') }}' + 'home',
                type: 'GET',
                dataType: 'json',
                headers: {
                    "Authorization": "Bearer " + sessionStorage.getItem('token')
                },
                beforeSend: function () {
                        $("#preloder").fadeIn();
                    },
                success: function(response) {
                    console.log(response);
                    $("#preloder").fadeOut();
                    // Assuming the response is an object with properties 'orderamount', 'ordercount', etc.
                    $('#total-orders-amount').text(`₹${response.data.orderamount}`);
                    $('#total-orders-count').text(response.data.ordercount);
                    $('#po-amount').text(`₹${response.data.poamount}`);
                    $('#po-count').text(response.data.pocount);
                    $('#invoice-amount').text(`₹${response.data.invoiceamount}`);
                    $('#invoice-count').text(response.data.invoicecount);
                    $('#settlement-amount').text(`₹${response.data.settlementamount}`);
                    $('#settlement-count').text(response.data.settlementcount);
                },
                error: function(error) {
                    console.error('Error fetching total orders:', error);
                }
            });
        }

        // Call the function to fetch data when the page loads
        fetchTotalOrders();
    });
</script>
@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 src="{{ asset('backend/js/home.js') }}"></script>
@endsection