@extends('admin.layouts.masterlayout')

@section('title', 'Inventory Management')
@section('head_title', 'Inventory Management')

@section('content')
<div class="dashboard-body-content">
        <div class="manage-offers-flex">
            <h2>Inventory List</h2>

            <div class="d-flex gap-3 align-items-center manage-search-container">
                <div class="position-relative w-100">
                    <input type="search" class="form-control inventory_search" placeholder="Search here">
                    <div class="search-icon">
                        <img src="{{asset('assets/img/dashboard/search-icon.png')}}" alt="">
                    </div>
                </div>
                @if(authAdminUser()->can('inventory_management.create'))
                <a href="{{route('admin.addInventory')}}" class="ct-btn text-center add-ct-btn">Add Inventory</a>
                @endif
            </div>
        </div>
    <div class="tab-content">
        <div class="" id="inventory_data">
            <div class="ct-dashboard-table-container">
                <div class="card p-2">
                    <div class="table-responsive">
                        <table class="table mb-0" id="inventory_Table">
                            <thead>

                                <tr>
                                    <th>#</th>
                                    <th>Item Name</th>
                                    <th>Shop</th>
                                    <th>Stock</th>
                                    <th>Supplier</th>
                                    <!-- <th>Assigned Artist</th> -->
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>

                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/dataTables.js') }}"></script>
<script>
    $(document).ready(function() {
        const InventoryTable = $('#inventory_Table').DataTable({
            dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.getInventory') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                  {
                    data: {
                        _: 'item_name.display',
                        sort: 'item_name.sort'
                    },
                    name: 'item.name',
                    orderable: false, // or true, depending on whether you want to allow sorting by the shop column
                    searchable: true
                },
                {
                    data: {
                        _: 'shop_name.display',
                        sort: 'shop_name.sort'
                    },
                    name: 'shop.shop_name',
                    orderable: false, // or true, depending on whether you want to allow sorting by the shop column
                    searchable: true
                },
                {
                    data: 'stock_quantity',
                    name: 'stock_quantity'
                },
                {
                    data: 'supplier_name',
                    name: 'supplier_name'
                },
                // {
                //     data: 'assign_artist',
                //     name: 'assign_artist'
                // },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]

        });
        $('.inventory_search').on('input', function() {
            var searchText = $(this).val(); // <-- get the value from input
            InventoryTable.search(searchText).draw(); // use it for DataTable search
        });
        $(document).on('click', '.tattoo-delete-btn', function() {
            var inventory_id = $(this).attr("data-deleted-id");

            if (inventory_id != "" || inventory_id != 0) {
                $('.tattoo-delete-btn').attr('disabled');
                $('.tattoo-delete-btn').addClass('loader-active');

                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.deleteInventory') }}",
                    data: {
                        inventory_id: inventory_id
                    },
                    success: function(response) {

                        $('.tattoo-delete-modal').modal('hide');
                        $('.tattoo-delete-btn').removeAttr('disabled');
                        $('.tattoo-delete-btn').removeClass('loader-active');

                        if (response.status === true) {
                           
                            if (InventoryTable.rows({
                                    page: 'current'
                                }).count() === 1) {
                                InventoryTable.page('previous').draw('page');
                            } else {
                                InventoryTable.ajax.reload(null, false);
                            }

                            custom_message('success', response.message);
                        } else {
                            custom_message('error', response.message);
                        }
                    }
                });
            } else {
                custom_message('error', "Inventory Item isn't found");
            }
        });
        $(document).on('click', '.delete_inventory', function() {
            var inventory_id = $(this).attr("data-id");
            $(".tattoo-delete-btn").attr('data-deleted-id', inventory_id);
            $('.tattoo-delete-modal').modal('show');

        });
    });
</script>

@endsection