@extends('layouts.app')
@section('title', 'Stock Units Report')

@section('content')

<!-- Content Header -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        Stock Units Report
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-header">
                    <h3 class="box-title">Filters</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                                {!! Form::select('location_id', $business_locations, request()->input('location_id', null), ['class' => 'form-control select2', 'style' => 'width:100%', 'id' => 'location_filter', 'placeholder' => 'All Locations']); !!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('category_filter', 'Category:') !!}
                                {!! Form::select('category_filter', $categories ?? [], request()->input('category_filter', null), ['class' => 'form-control select2', 'style' => 'width:100%', 'id' => 'category_filter', 'placeholder' => 'All Categories']); !!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-primary" id="apply_filters" style="margin-top: 25px;">
                                <i class="fa fa-filter"></i> Apply Filters
                            </button>
                            <button type="button" class="btn btn-default" id="reset_filters" style="margin-top: 25px;">
                                <i class="fa fa-refresh"></i> Reset
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box box-solid">
                
                <div class="box-body">
                    <!-- Info message when no data -->
                    <div id="no_data_message" class="alert alert-info" style="display: none;">
                        <i class="fa fa-info-circle"></i> 
                        No products found. Please add products to get started.
                    </div>

                    <!-- Pagination Length Dropdown -->
                    <div class="row" style="margin-bottom: 10px;">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="page_length">Show entries:</label>
                                <select id="page_length" class="form-control" style="width: auto; display: inline-block; margin-left: 5px;">
                                    <option value="10" {{ $default_page_entries == 10 ? 'selected' : '' }}>10</option>
                                    <option value="25" {{ $default_page_entries == 25 ? 'selected' : '' }}>25</option>
                                    <option value="50" {{ $default_page_entries == 50 ? 'selected' : '' }}>50</option>
                                    <option value="100" {{ $default_page_entries == 100 ? 'selected' : '' }}>100</option>
                                    <option value="200" {{ $default_page_entries == 200 ? 'selected' : '' }}>200</option>
                                    <option value="500" {{ $default_page_entries == 500 ? 'selected' : '' }}>500</option>
                                    <option value="1000" {{ $default_page_entries == 1000 ? 'selected' : '' }}>1000</option>
                                    <option value="-1" {{ $default_page_entries == -1 ? 'selected' : '' }}>All</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-9 text-right" style="padding-top: 25px;">
                            <span id="table_info" class="text-muted"></span>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="stock_units_report_table" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th style="width: 100px;">Product Name</th>
                                    <th style="width: 50px;">SKU</th>
                                    <th style="min-width: 80px;">Category</th>
                                    <th style="min-width: 250px;">Locations</th>
                                    <th class="base-unit-column" style="min-width: 120px;">Total Base Unit Stock</th>
                                    <th class="stock-value-column" style="min-width: 120px;">Stock Value ({{ $currency_symbol ?? '' }})</th>
                                    <th style="min-width: 450px;">Secondary Units Stock</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize select2
        $('.select2').select2();

        // Get default page length from PHP variable
        var defaultPageLength = {{ $default_page_entries ?? 25 }};
        var currencySymbol = '{{ $currency_symbol ?? "$" }}';
        
        // Set the dropdown to the default value
        $('#page_length').val(defaultPageLength);

        // Initialize DataTable
        var stockUnitsTable = $('#stock_units_report_table').DataTable({
            processing: true,
            serverSide: true,
            pageLength: defaultPageLength,
            ajax: {
                url: "{{ route('stock-units-report.data') }}",
                data: function(d) {
                    d.location_id = $('#location_filter').val();
                    d.category_id = $('#category_filter').val();
                },
                dataSrc: function(json) {
                    console.log('Data received:', json);
                    
                    if (!json.data || json.data.length === 0) {
                        $('#no_data_message').show();
                    } else {
                        $('#no_data_message').hide();
                        console.log('Rows received:', json.data.length);
                        if (json.data.length > 0) {
                            console.log('First row:', json.data[0]);
                        }
                    }
                    return json.data;
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', xhr);
                    console.error('Status:', status);
                    console.error('Error:', error);
                    $('#no_data_message').show().html(
                        '<div class="alert alert-danger">' +
                        '<i class="fa fa-exclamation-circle"></i> ' +
                        'Error loading data: ' + error +
                        '</div>'
                    );
                }
            },
            columns: [
                { 
                    data: null, 
                    name: 'DT_RowIndex', 
                    orderable: false, 
                    searchable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                { data: 'product_name', name: 'product_name' },
                { data: 'sku', name: 'sku' },
                { data: 'category', name: 'category' },
                { data: 'locations', name: 'locations', orderable: false, searchable: false },
                { data: 'total_stock', name: 'total_stock' },
                { data: 'stock_value', name: 'stock_value' },
                { 
                    data: 'other_units', 
                    name: 'other_units', 
                    orderable: false, 
                    searchable: false,
                    className: 'other-units-cell'
                }
            ],
            columnDefs: [
                {
                    targets: 0,
                    className: 'text-left',
                    width: '50px'
                },
                {
                    targets: 1,
                    className: 'text-left'
                },
                {
                    targets: 2,
                    className: 'text-left'
                },
                {
                    targets: 3,
                    className: 'text-left'
                },
                {
                    targets: 4,
                    className: 'text-left'
                },
                {
                    targets: 5,
                    className: 'text-left'
                },
                {
                    targets: 6,
                    className: 'text-left'
                },
                {
                    targets: 7,
                    className: 'text-left'
                }
            ],
            dom: 'Bfrtip',
            lengthMenu: [
                [10, 25, 50, 100, 200, 500, 1000, -1],
                [10, 25, 50, 100, 200, 500, 1000, "All"]
            ],
            drawCallback: function(settings) {
                var api = this.api();
                var data = api.data();
                console.log('Table redrawn. Row count:', data.count());
                
                if (data.count() === 0) {
                    $('#no_data_message').show();
                } else {
                    $('#no_data_message').hide();
                }
                
                // Update the custom info display
                var info = api.page.info();
                var start = info.start + 1;
                var end = info.end;
                var total = info.recordsTotal;
                var showingText = 'Showing ' + start + ' to ' + end + ' of ' + total + ' entries';
                if (total === -1) {
                    showingText = 'Showing all ' + info.recordsDisplay + ' entries';
                }
                $('#table_info').text(showingText);
                
                // Sync the dropdown with current page length
                $('#page_length').val(info.length);
            }
        });

        // Handle page length change from custom dropdown
        $('#page_length').on('change', function() {
            var length = parseInt($(this).val());
            stockUnitsTable.page.len(length).draw();
        });

        // Apply filters
        $('#apply_filters').on('click', function() {
            console.log('Applying filters...');
            stockUnitsTable.ajax.reload();
        });

        // Reset filters
        $('#reset_filters').on('click', function() {
            console.log('Resetting filters...');
            $('#location_filter').val('').trigger('change');
            $('#category_filter').val('').trigger('change');
            stockUnitsTable.ajax.reload();
        });

        // Export functionality
        $('#export_pdf').on('click', function() {
            console.log('Exporting to PDF...');
            window.location.href = "{{ route('stock-units-report.export', ['format' => 'pdf']) }}" + 
                '?location_id=' + $('#location_filter').val() + 
                '&category_id=' + $('#category_filter').val();
        });

        $('#export_csv').on('click', function() {
            console.log('Exporting to CSV...');
            window.location.href = "{{ route('stock-units-report.export', ['format' => 'csv']) }}" + 
                '?location_id=' + $('#location_filter').val() + 
                '&category_id=' + $('#category_filter').val();
        });
    });
</script>

<style>
    /* Custom styles for the secondary units table */
    .other-units-cell table {
        width: 100% !important;
        min-width: 150px;
    }
    
    .other-units-cell table td {
        white-space: nowrap;
    }
    
    /* Make the value row stand out */
    .other-units-cell table tr:last-child td {
        font-weight: bold;
        background-color: #f8f9fa;
    }
    
    /* Ensure the table is scrollable on small screens */
    .table-responsive {
        overflow-x: auto;
    }
</style>
@endsection