@extends('layouts.customapp')

@section('content')
    <!-- Navbar Start -->

    <style>
        .dataTables_filter {
            float: right;
            margin-bottom: 1em;

            &:after {
                clear: both;
            }
        }

        .dt-buttons a .glyphicon {
            visibility: hidden;
        }

        .dt-buttons a:hover .glyphicon {
            visibility: visible;
        }

        .order,
        .purchase,
        .invoice,
        .settlement {
            border: none !important;
            cursor: pointer;
        }
    </style>

    <div class="container-fluid pt-4 px-4">
        <div class="row">
            <!-- Total Orders Card -->
           <div class="mt-6 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('alldetails') }}">
                                <div>
                                    <h4 class="mb-0">Supplier Count</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="supplierCount" 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-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('procurementdetails') }}">
                                <div>
                                    <h4 class="mb-0">Procurement Count</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="proCount" 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="#">
                                <div>
                                    <h4 class="mb-0">Total Invoices</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>300</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="#">
                                <div>
                                    <h4 class="mb-0">Gate Inward</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 class="fw-bold">150</h1>
                            <p class="mb-0">
                                <span id="settlement-count" class="text-dark me-2"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>  
        </div>  
        <div class="container-fluid pt-4 px-4">
       <div class="row ">
            <div class="col-6 mt-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Usage Analysis</h1>
                </div>
                <div class="card-body">
                    <div class="table-responsive  table-card">
                        <table class="table table-hover table-centered align-middle" id="userlogaudit">
                            <thead class="text-muted table-light" style="font-size: 11px;">
                                <tr>
                                    <th style="width: 50px;">SNO</th>
                                    <th>Name</th>
                                    {{-- <th>IP address</th> --}}
                                    <th>Last Login</th>
                                </tr>
                            </thead>
                            <tbody >
                                <!-- Data will be loaded here via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
                </div>

               
        
           
           

        </div>
    </div>
@endsection


<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

@section('script')
<!-- DateRangePicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<!-- Moment.js (for date manipulation) -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

<!-- DateRangePicker JS -->
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>



<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap4.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.css" /> -->
<!-- <script>
    $(function() {
        $('#example').dataTable({
            paging: false,
            fixedHeader: {
                header: true
            },
            dom: 'Bfrtip',
            buttons: [{
                    extend: 'excel',
                    text: 'Excel <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>'
                },
                {
                    extend: 'pdf',
                    text: 'PDF <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>'
                },

                'copy',
                'pdf',
                'colvis'
            ],

        });
    });
</script> -->

<script>
    $(document).ready(function() {
        var table = $('#userlogaudit').DataTable({
            paging: false,
            searching: false,
            ordering: true,
            order: [[0, 'asc']],
            // dom: 'Bfrtip',

        });

    
    

        $.ajax({
            url: '{{ env('API_URL') }}' + 'useraudit',
            method: 'GET',
            headers: {
                    "Authorization": "Bearer " + sessionStorage.getItem('token')
                },
            success: function(response) {
               console.log(response);

                if (response.success && response.data) {
                    // Clear any existing rows in the DataTable
                    table.clear();

                    response.data.forEach(function(item, index) {
                        table.row.add([
                            index + 1,                 // SNO
                            item.Employee || '-',       // Name
                            // item.EmpCode || '-',        // Emp Code (mapped as IP Address)
                            item.LastLoginDateTime || '-',        // Date
                        ]);
                    });

                    // Redraw the table with the new data
                    table.draw();
                } else {
                    // If no data found
                    $('#userlogaudit tbody').append('<tr><td colspan="5">No data found</td></tr>');
                }
            },
            error: function() {
                console.log("Error fetching data.");
                $('#userlogaudit tbody').append('<tr><td colspan="5">Error fetching data</td></tr>');
            }
        });
    });
</script>


<script>
    $(document).ready(function() {
        // Function to fetch data from API
        function fetchTotalOrders() {
            $.ajax({
                url: '{{ env('API_URL') }}' + 'admin_dashboard',
                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.
                    $('#supplierCount').text(`${response.supplier_count}`);
                    $('#proCount').text(`${response.pro_count}`);

                },
                
                error: function(error) {
                    console.error('Error fetching total orders:', error);
                }
            });
        }
       

        // Call the function to fetch data when the page loads
        fetchTotalOrders();
       
    });
</script>
@endsection