
<?php $__env->startSection('title', 'Warehouse Pieces Management'); ?>

<?php $__env->startPush('plugin-styles'); ?>
    <style>
        .stats-card {
            border-left: 4px solid #007bff;
        }
        .stats-card.success {
            border-left-color: #28a745;
        }
        .stats-card.warning {
            border-left-color: #ffc107;
        }
        .stats-card.danger {
            border-left-color: #dc3545;
        }
        .stats-card.info {
            border-left-color: #17a2b8;
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('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">Warehouse Pieces Management</h6>
                        <div>
                            <button type="button" class="btn btn-info" id="refresh-stats">
                                <i class="fas fa-sync-alt me-2"></i>Refresh Stats
                            </button>
                        </div>
                    </div>

                    <!-- Statistics Cards -->
                    <div class="row mb-4" id="statistics-cards">
                        <div class="col-md-3">
                            <div class="card stats-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 stats-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 stats-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 stats-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>
                                <?php $__currentLoopData = $warehouses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $warehouse): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($warehouse->id); ?>"><?php echo e($warehouse->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </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>
                                <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($item->id); ?>"><?php echo e($item->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </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="warehouse-pieces-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>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Piece Details Modal -->
<div class="modal fade" id="piece-details-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Piece Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="piece-details-content">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Update Status Modal -->
<div class="modal fade" id="update-status-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Piece Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="update-status-form">
                <div class="modal-body">
                    <input type="hidden" id="piece-id" name="piece_id">
                    <div class="mb-3">
                        <label for="status-select" class="form-label">Status</label>
                        <select class="form-control" id="status-select" name="status" required>
                            <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="mb-3">
                        <label for="status-notes" class="form-label">Notes</label>
                        <textarea class="form-control" id="status-notes" name="notes" rows="3" placeholder="Optional notes about the status change..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Status</button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('custom-scripts'); ?>
<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#warehouse-pieces-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "<?php echo e(route('warehouse-pieces.index')); ?>",
            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' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'desc']],
        pageLength: 25
    });

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

    // Load statistics
    loadStatistics();

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

    // View piece details
    $(document).on('click', '.view-piece', function() {
        var pieceId = $(this).data('id');
        loadPieceDetails(pieceId);
    });

    // Update status buttons
    $(document).on('click', '.reserve-piece, .sell-piece, .release-piece', function() {
        var pieceId = $(this).data('id');
        var action = $(this).hasClass('reserve-piece') ? 'reserved' :
                    $(this).hasClass('sell-piece') ? 'sold' : 'available';

        $('#piece-id').val(pieceId);
        $('#status-select').val(action);
        $('#update-status-modal').modal('show');
    });

    // Update status form submission
    $('#update-status-form').on('submit', function(e) {
        e.preventDefault();

        var pieceId = $('#piece-id').val();
        var status = $('#status-select').val();
        var notes = $('#status-notes').val();

        $.ajax({
            url: '/warehouse-pieces/' + pieceId + '/update-status',
            type: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                status: status,
                notes: notes
            },
            success: function(response) {
                if (response.success) {
                    $('#update-status-modal').modal('hide');
                    table.draw();
                    loadStatistics();
                    showAlert('success', response.message);
                } else {
                    showAlert('error', response.message);
                }
            },
            error: function(xhr) {
                showAlert('error', 'Failed to update piece status');
            }
        });
    });

    function loadStatistics() {
        $.ajax({
            url: '/warehouse-pieces/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);
                }
            }
        });
    }

    function loadPieceDetails(pieceId) {
        $.ajax({
            url: '/warehouse-pieces/' + pieceId,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    var data = response.data;
                    var content = `
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Basic Information</h6>
                                <table class="table table-sm">
                                    <tr><td><strong>ID:</strong></td><td>${data.id}</td></tr>
                                    <tr><td><strong>Warehouse:</strong></td><td>${data.warehouse_name}</td></tr>
                                    <tr><td><strong>Item:</strong></td><td>${data.item_name}</td></tr>
                                    <tr><td><strong>SKU:</strong></td><td>${data.item_sku}</td></tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6>Piece Details</h6>
                                <table class="table table-sm">
                                    <tr><td><strong>Piece Number:</strong></td><td>${data.piece_number}</td></tr>
                                    <tr><td><strong>Length:</strong></td><td>${data.length}</td></tr>
                                    <tr><td><strong>Status:</strong></td><td>${data.status}</td></tr>
                                    <tr><td><strong>Grade:</strong></td><td>${data.grade}</td></tr>
                                </table>
                            </div>
                        </div>
                        ${data.notes ? `<div class="row"><div class="col-12"><h6>Notes</h6><p>${data.notes}</p></div></div>` : ''}
                        <div class="row">
                            <div class="col-md-6">
                                <small class="text-muted">Created: ${data.created_at}</small>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted">Updated: ${data.updated_at}</small>
                            </div>
                        </div>
                    `;
                    $('#piece-details-content').html(content);
                    $('#piece-details-modal').modal('show');
                }
            }
        });
    }

    function showAlert(type, message) {
        var alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        var alert = `<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                     </div>`;
        $('.page-content').prepend(alert);

        setTimeout(function() {
            $('.alert').fadeOut();
        }, 5000);
    }
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\habibcables-ERP\resources\views\warehouse-pieces\index.blade.php ENDPATH**/ ?>