@extends('Admin.layout')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        {{-- HEADER --}}
        <div class="d-flex align-items-center gap-3 mb-4">
            <a href="{{ route('product') }}" class="back-btn" title="Back to Products">
                <i class="fas fa-chevron-left"></i>
            </a>

            <div>
                <h4 class="fw-bold mb-1">Stock History</h4>
                <small class="text-muted">
                    {{ $product->name }}
                </small>
            </div>
        </div>

        {{-- HISTORY TABLE --}}
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="stockHistoryTable" class="table table-bordered table-hover align-middle w-100">

                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Date &amp; Time</th>
                                <th>Type</th>
                                <th>Change</th>
                                <th>Old Stock</th>
                                <th>New Stock</th>
                                <th>Reason</th>
                                <th>Remark</th>
                            </tr>
                        </thead>

                        <tbody>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {

            $('#stockHistoryTable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: true,
                ordering: true,
                responsive: false,

                ajax: {
                    url: @json(route('product_history_data', $product->product_id)),
                    type: 'GET',
                    error: function(xhr) {
                        console.error(
                            'Failed to load stock history:',
                            xhr.responseText
                        );
                    }
                },

                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date_time',
                        name: 'created_at'
                    },
                    {
                        data: 'type_badge',
                        name: 'type',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'change_display',
                        name: 'quantity_change'
                    },
                    {
                        data: 'old_quantity',
                        name: 'old_quantity'
                    },
                    {
                        data: 'new_quantity',
                        name: 'new_quantity'
                    },
                    {
                        data: 'reason',
                        name: 'reason'
                    },
                    {
                        data: 'remark',
                        name: 'remark'
                    }
                ],

                columnDefs: [

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

                ],
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                order: [
                    [1, 'desc']
                ],

                language: {

                    lengthMenu: "_MENU_",

                    search: "",

                    searchPlaceholder: "Search..."

                }
            });

        });
    </script>
@endsection