@extends('layouts.app')
@section('title', 'Piece Inventory Report')

@push('plugin-styles')
    <style>
        .inventory-card {
            border-left: 4px solid #007bff;
        }
        .inventory-card.success {
            border-left-color: #28a745;
        }
        .inventory-card.warning {
            border-left-color: #ffc107;
        }
        .inventory-card.danger {
            border-left-color: #dc3545;
        }
        .inventory-card.info {
            border-left-color: #17a2b8;
        }
    </style>
@endpush

@section('content')
<div class="page-content">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h6 class="card-title">Piece Inventory Report</h6>
                        <div>
                            <button type="button" class="btn btn-info" id="refresh-stats">
                                <i class="fas fa-sync-alt me-2"></i>Refresh Statistics
                            </button>
                            <button type="button" class="btn btn-success" id="export-report">
                                <i class="fas fa-download me-2"></i>Export Report
                            </button>
                        </div>
                    </div>

                    <!-- Statistics Cards -->
                    <div class="row mb-4" id="statistics-cards">
                        <div class="col-md-3">
                            <div class="card inventory-card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title">Total Pieces</h6>
                                            <h3 class="mb-0" id="total-pieces">0</h3>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-cubes fa-2x text-primary"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card inventory-card success">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title">Available</h6>
                                            <h3 class="mb-0" id="available-pieces">0</h3>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-check-circle fa-2x text-success"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card inventory-card warning">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title">Reserved</h6>
                                            <h3 class="mb-0" id="reserved-pieces">0</h3>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-clock fa-2x text-warning"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card inventory-card danger">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="card-title">Sold</h6>
                                            <h3 class="mb-0" id="sold-pieces">0</h3>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-shopping-cart fa-2x text-danger"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Filters -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label for="warehouse-filter" class="form-label">Warehouse</label>
                            <select class="form-control" id="warehouse-filter">
                                <option value="">All Warehouses</option>
                                @foreach($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="item-filter" class="form-label">Item</label>
                            <select class="form-control" id="item-filter">
                                <option value="">All Items</option>
                                @foreach($items as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="status-filter" class="form-label">Status</label>
                            <select class="form-control" id="status-filter">
                                <option value="">All Status</option>
                                <option value="available">Available</option>
                                <option value="reserved">Reserved</option>
                                <option value="sold">Sold</option>
                                <option value="b_grade">B-Grade</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="grade-filter" class="form-label">Grade</label>
                            <select class="form-control" id="grade-filter">
                                <option value="">All Grades</option>
                                <option value="a_grade">A-Grade</option>
                                <option value="b_grade">B-Grade</option>
                            </select>
                        </div>
                    </div>

                    <!-- DataTable -->
                    <div class="table-responsive">
                        <table class="table table-bordered" id="piece-inventory-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Warehouse</th>
                                    <th>Item</th>
                                    <th>SKU</th>
                                    <th>Piece Number</th>
                                    <th>Length</th>
                                    <th>Status</th>
                                    <th>Grade</th>
                                    <th>Created</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#piece-inventory-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('reports.piece-inventory') }}",
            data: function(d) {
                d.warehouse_id = $('#warehouse-filter').val();
                d.item_id = $('#item-filter').val();
                d.status = $('#status-filter').val();
                d.grade = $('#grade-filter').val();
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'warehouse_name', name: 'warehouse_name' },
            { data: 'item_name', name: 'item_name' },
            { data: 'item_sku', name: 'item_sku' },
            { data: 'piece_number', name: 'piece_number' },
            { data: 'formatted_length', name: 'length' },
            { data: 'status_badge', name: 'status' },
            { data: 'grade_badge', name: 'grade' },
            { data: 'created_at', name: 'created_at' }
        ],
        order: [[0, 'desc']],
        pageLength: 25
    });

    // Filter change handlers
    $('#warehouse-filter, #item-filter, #status-filter, #grade-filter').on('change', function() {
        table.draw();
        loadStatistics();
    });

    // Load statistics
    loadStatistics();

    // Refresh statistics button
    $('#refresh-stats').on('click', function() {
        loadStatistics();
    });

    // Export report button
    $('#export-report').on('click', function() {
        var params = new URLSearchParams({
            warehouse_id: $('#warehouse-filter').val(),
            item_id: $('#item-filter').val(),
            status: $('#status-filter').val(),
            grade: $('#grade-filter').val(),
            export: 'excel'
        });

        window.open('{{ route("reports.piece-inventory") }}?' + params.toString(), '_blank');
    });

    function loadStatistics() {
        $.ajax({
            url: '{{ route("reports.warehouse-piece-statistics") }}',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    $('#total-pieces').text(response.data.total_pieces);
                    $('#available-pieces').text(response.data.available_pieces);
                    $('#reserved-pieces').text(response.data.reserved_pieces);
                    $('#sold-pieces').text(response.data.sold_pieces);
                }
            }
        });
    }
});
</script>
@endpush
