@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">
        <!-- Supplier count-->
        <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">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>2</h1>
                        <p class="mb-0">
                            <span id="total-orders-count" class="text-dark me-2"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Purchase Order-->
        <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">Total 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>200</h1>
                        <p class="mb-0">
                            <span id="po-count" class="text-dark me-2"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Over Due Po's -->
        <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">Over Due 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>150</h1>
                        <p class="mb-0">
                            <span id="po-count" class="text-dark me-2"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Invoice -->
        <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">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>

        <!-- Gate Inward -->
        <div class="mt-6 col-xl-3 col-lg-6 col-md-12 col-12 pt-3">
            <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">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>


@endsection

<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>