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

@section('content')

<section class="content-header">
    <h1>Stock Units Report - Debug Mode</h1>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- Debug Information -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">Debug Information</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h4>Unit Batches:</h4>
                            <pre>{{ json_encode($unit_batches->toArray(), JSON_PRETTY_PRINT) }}</pre>
                        </div>
                        <div class="col-md-6">
                            <h4>Business Locations:</h4>
                            <pre>{{ json_encode($business_locations->toArray(), JSON_PRETTY_PRINT) }}</pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter Section -->
            <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('batch_id', 'Unit Batch:') !!}
                                {!! Form::select('batch_id', $unit_batches, request()->input('batch_id', null), ['class' => 'form-control select2', 'style' => 'width:100%', 'id' => 'batch_filter', 'placeholder' => 'All Batches']); !!}
                            </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>

            <!-- Data Table -->
            <div class="box box-solid">
                <div class="box-header">
                    <h3 class="box-title">Stock Units Report Data</h3>
                    <div class="box-tools">
                        <button type="button" class="btn btn-success btn-sm" id="export_excel">
                            <i class="fa fa-file-excel-o"></i> Export to Excel
                        </button>
                        <button type="button" class="btn btn-info btn-sm" id="export_pdf">
                            <i class="fa fa-file-pdf-o"></i> Export to PDF
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="debug_output" style="margin-bottom: 10px;"></div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="stock_units_report_table" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Product Name</th>
                                    <th>SKU</th>
                                    <th class="base-unit-column">Base Unit Qty</th>
                                    <th>Other Units</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();

        // Initialize DataTable with debug info
        var stockUnitsTable = $('#stock_units_report_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('stock-units-report.data') }}",
                data: function(d) {
                    d.location_id = $('#location_filter').val();
                    d.batch_id = $('#batch_filter').val();
                },
                error: function(xhr, status, error) {
                    console.error('DataTable AJAX Error:', xhr);
                    console.error('Status:', status);
                    console.error('Error:', error);
                    $('#debug_output').html(
                        '<div class="alert alert-danger">' +
                        '<strong>Error loading data:</strong> ' + error + 
                        '<br>Check console for details' +
                        '</div>'
                    );
                },
                complete: function(xhr) {
                    console.log('AJAX Complete Response:', xhr);
                    if (xhr.responseJSON) {
                        console.log('Response Data:', xhr.responseJSON);
                        if (xhr.responseJSON.data) {
                            console.log('Data rows:', xhr.responseJSON.data.length);
                            $('#debug_output').html(
                                '<div class="alert alert-success">' +
                                'Loaded ' + xhr.responseJSON.data.length + ' rows' +
                                '</div>'
                            );
                        }
                    }
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'product_name', name: 'product_name' },
                { data: 'sku', name: 'sku' },
                { data: 'base_unit', name: 'base_unit' },
                { data: 'other_units', name: 'other_units', orderable: false, searchable: false }
            ],
            columnDefs: [
                {
                    targets: '_all',
                    className: 'text-center'
                }
            ],
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"]
            ],
            pageLength: 25,
            drawCallback: function(settings) {
                console.log('DataTable redrawn. Row count:', settings.aoData.length);
            }
        });

        // 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');
            $('#batch_filter').val('').trigger('change');
            stockUnitsTable.ajax.reload();
        });

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

        $('#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() + 
                '&batch_id=' + $('#batch_filter').val();
        });
    });
</script>
@endsection