@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')

<div class="mb-3">
    <h4>Inventory</h4>
</div>

  <div class="row">

        <div class="col-lg-4 col-md-6 col-sm-6 mb-4">

            <a href="" class="text-decoration-none">

                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">

                            <div>
                                <h6 class="mb-1 text-dark">Total Products</h6>
                            </div>

                            <span class="badge bg-label-success rounded p-2">
                                <i class="icon-base ti tabler-soup icon-26px"></i>
                            </span>

                        </div>

                        <h5 class="fw-bold mt-3 mb-0 text-dark">45000</h5>

                    </div>

                </div>

            </a>

        </div>

        <div class="col-lg-4 col-md-6 col-sm-6 mb-4">

            <a href="" class="text-decoration-none">

                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">

                            <div>
                                <h6 class="mb-1 text-dark">Low Stock</h6>
                            </div>

                            <span class="badge bg-label-success rounded p-2">
                                <i class="icon-base ti tabler-soup icon-26px"></i>
                            </span>

                        </div>

                        <h5 class="fw-bold mt-3 mb-0 text-dark">5</h5>

                    </div>

                </div>

            </a>

        </div>

        <div class="col-lg-4 col-md-6 col-sm-6 mb-4">

            <a href="" class="text-decoration-none">

                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">

                            <div>
                                <h6 class="mb-1 text-dark">Out of Stock</h6>
                            </div>

                            <span class="badge bg-label-success rounded p-2">
                                <i class="icon-base ti tabler-soup icon-26px"></i>
                            </span>

                        </div>

                        <h5 class="fw-bold mt-3 mb-0 text-dark">2</h5>

                    </div>

                </div>

            </a>

        </div>
    </div>


<div class="card p-4">
  
    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">

        <!-- Page Length -->
        <div class="mb-3 mb-lg-0">

            <select id="pageLength" class="form-select w-auto">

                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>

            </select>

        </div>


        <!-- Search + Export -->
        <div class="col-lg-6 col-12 mb-3">

            <div class="d-flex flex-column flex-lg-row gap-3">

                <!-- Search -->
                <div class="search-box flex-grow-1">

                    <input type="search"
                        id="searchBox"
                        class="form-control"
                        placeholder="Search">

                </div>


                <!-- Export -->
                <button type="button"
                    class="btn btn-primary border flex-shrink-0"
                    id="exportBtn">

                    <i class="ti tabler-download me-2"></i>

                    Export

                </button>

            </div>

        </div>

    </div>

    <div class="table-responsive p-2">
        <table id="table" class="table">

            <thead class="bg-primary-subtle">

                <tr>

                    <th>SNO</th>
                    <th>PRODUCTS</th>
                    <th>SKU</th>
                    <th>CATEGORY</th>
                    <th>STOCK</th>
                    <th>STATUS</th>
                    <th>LAST UPDATED</th>
                    <th>ACTION</th>

                </tr>

            </thead>

            <tbody>
            </tbody>

        </table>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {

        const inventoryData = [

            {
                sno: 1,
                product: 'Diamond Ring',
                sku:'RING001',
                category: 'Rings',
                stock:12,
                status: 'In Stock',
                last_updated:'17/6/2026'
            },

            {
                sno: 1,
                product: 'Diamond Ring',
                sku:'RING001',
                category: 'Rings',
                stock:12,
                status: 'In Stock',
                last_updated:'17/6/2026'
            },

            {
                sno: 1,
                product: 'Diamond Ring',
                sku:'RING001',
                category: 'Rings',
                stock:12,
                status: 'Out of Stock',
                last_updated:'17/6/2026'
            },


        ];

        const table = $('#table').DataTable({

            data: inventoryData,

            pageLength: 10,

            searching: true,

            lengthChange: false,

            ordering: true,

            columnDefs: [

                {
                    targets: '_all',
                    className: 'text-nowrap'
                }

            ],
            createdRow: function(row, data, dataIndex) {

                if (dataIndex % 2 != 0) {
                    $(row).addClass('bg-primary-subtle');
                }

            },

            buttons: [

                {

                    extend: 'pdfHtml5',
                    title: 'inventory_Report',
                    filename: 'inventory_Report',
                    exportOptions: {
                        columns: [
                            0,
                            1,
                            2,
                            3,
                            4,
                            5,
                            6
                        ]

                    }

                }

            ],

            columns: [

                {
                    data: 'sno'
                },

                {
                    data: 'product'
                },
                {
                    data: 'sku'
                },

                {
                    data: 'category'
                },

                {
                    data: 'stock'
                },

                {
                    data: 'status',
                    render: function(data) {
                        return data === 'In Stock' ?
                            '<span class="badge bg-success">In Stock</span>' :
                            '<span class="badge bg-danger">Out of Stock</span>';
                    }
                },
                {
                    data: 'last_updated'
                },

                {

                    data: null,

                    orderable: false,

                    searchable: false,

                    render: function() {

                        return `

                        <a href="{{route('admin.view_inventory')}}"
                           class="btn btn-primary btn-sm me-1">

                            <i class="ti tabler-eye"></i>

                        </a>

                        <a href="{{route('admin.update_inventory')}}"
                           class="btn btn-primary btn-sm me-1">

                            <i class="ti tabler-edit"></i>

                        </a>

                    `;

                    }

                }

            ]

        });


        $('#searchBox').on('keyup', function() {

            table.search(this.value).draw();

        });

        $('#pageLength').on('change', function() {

            const length = $(this).val();

            table.page.len(length).draw();

        });

        $('#exportBtn').on('click', function() {

            table.button('.buttons-pdf').trigger();

        });


    });
</script>

@endsection