<?php $CI =& get_instance(); ?>
<!-- Compact Batch Selection Modal -->
<div class="modal fade" id="sales_batch_selection_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info" style="padding: 10px 15px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#fff; opacity:1; font-size:28px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,0.3); margin-top:-2px;">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" style="font-size: 14px;">
                    <i class="fa fa-cubes"></i> Select Batch: <strong id="modal_item_name_sales"></strong>
                </h4>
            </div>
            <div class="modal-body" style="padding: 12px; max-height: 400px; overflow-y: auto;">
                <!-- Stock Summary -->
                <div id="batch_stock_summary" style="background:#e8f5e9; padding:8px 10px; border-radius:4px; margin-bottom:10px; font-size:12px;">
                    <div class="row">
                        <div class="col-xs-4 text-center">
                            <strong class="text-success" id="batch_total_qty">0</strong><br>
                            <small class="text-muted">In Batches</small>
                        </div>
                        <div class="col-xs-4 text-center" style="border-left:1px solid #ccc; border-right:1px solid #ccc;">
                            <strong class="text-primary" id="batch_overall_qty">0</strong><br>
                            <small class="text-muted">Overall</small>
                        </div>
                        <div class="col-xs-4 text-center">
                            <strong class="text-warning" id="batch_unbatched_qty">0</strong><br>
                            <small class="text-muted">Unbatched</small>
                        </div>
                    </div>
                </div>

                <!-- Auto-Select FIFO Button -->
                <div class="text-center" style="margin-bottom: 10px;">
                    <button type="button" class="btn btn-success btn-sm" id="auto_select_fifo_btn" onclick="handleAutoSelectFIFO()">
                        <i class="fa fa-magic"></i> Auto-Select FIFO
                    </button>
                    <small class="text-muted" style="display:block; font-size:10px;">Selects batches expiring first</small>
                </div>

                <!-- Batches Table -->
                <div id="batch_table_container">
                    <table class="table table-condensed table-bordered" id="batch_selection_table" style="font-size: 11px; margin-bottom: 0;">
                        <thead style="background: #f5f5f5;">
                            <tr>
                                <th style="width:22%; padding:5px; text-align:left;">Batch #</th>
                                <th style="width:20%; padding:5px; text-align:left;">Expiry</th>
                                <th style="width:15%; padding:5px; text-align:center;">Days</th>
                                <th style="width:18%; padding:5px; text-align:right;">Stock</th>
                                <th style="width:25%; padding:5px; text-align:center;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="batch_selection_tbody">
                            <!-- Batches loaded here -->
                        </tbody>
                    </table>
                </div>

                <!-- No Batches Message -->
                <div class="row" id="no_batches_message" style="display: none;">
                    <div class="col-xs-12">
                        <div class="alert alert-warning text-center" style="margin: 0; padding: 15px;">
                            <i class="fa fa-exclamation-triangle"></i>
                            <strong>No batches available!</strong><br>
                            <small>This item has batch tracking but no batches with stock.</small>
                        </div>
                    </div>
                </div>

                <!-- Loading Indicator -->
                <div id="batch_loading" class="text-center" style="padding: 20px; display: none;">
                    <i class="fa fa-spinner fa-spin fa-2x text-info"></i>
                    <p class="text-muted" style="margin-top: 10px;">Loading batches...</p>
                </div>
            </div>
            <div class="modal-footer" style="padding: 10px 15px; background: #f5f5f5; border-top: 1px solid #ddd;">
                <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" id="batch_modal_close_btn">
                    <i class="fa fa-times"></i> Close
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Compact Batch Modal Styles */
#sales_batch_selection_modal .modal-dialog {
    max-width: 500px;
}
#sales_batch_selection_modal .modal-footer {
    flex-shrink: 0;
}
#sales_batch_selection_modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
#sales_batch_selection_modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

#batch_selection_table th,
#batch_selection_table td {
    padding: 6px 5px !important;
    vertical-align: middle;
}
#batch_selection_table th:nth-child(1),
#batch_selection_table td:nth-child(1) { text-align: left; }
#batch_selection_table th:nth-child(2),
#batch_selection_table td:nth-child(2) { text-align: left; }
#batch_selection_table th:nth-child(3),
#batch_selection_table td:nth-child(3) { text-align: center; }
#batch_selection_table th:nth-child(4),
#batch_selection_table td:nth-child(4) { text-align: right; }
#batch_selection_table th:nth-child(5),
#batch_selection_table td:nth-child(5) { text-align: center; }

#batch_selection_table tbody tr:hover {
    background-color: #f9f9f9;
}

#batch_selection_table .btn-xs {
    padding: 2px 8px;
    font-size: 11px;
}

/* Expiry status colors */
.batch-expired { color: #d9534f; font-weight: bold; }
.batch-expiring-soon { color: #f0ad4e; font-weight: bold; }
.batch-fresh { color: #5cb85c; }

/* Stock status colors */
.stock-low { color: #f0ad4e; font-weight: bold; }
.stock-out { color: #d9534f; font-weight: bold; }
.stock-good { color: #5cb85c; font-weight: bold; }

/* Mobile responsive */
@media (max-width: 480px) {
    #sales_batch_selection_modal .modal-dialog {
        margin: 10px;
    }

    #batch_selection_table {
        font-size: 10px !important;
    }

    #batch_selection_table th,
    #batch_selection_table td {
        padding: 4px 3px !important;
    }

    #batch_stock_summary {
        font-size: 11px;
    }
}
</style>

<script>
// Handle Auto-Select FIFO based on context (Sales vs POS)
function handleAutoSelectFIFO() {
    if (typeof window.current_pos_batch_row_id !== 'undefined' && window.current_pos_batch_row_id !== null) {
        console.log('Using POS FIFO auto-select');
        if (typeof autoSelectFIFOPOS === 'function') {
            autoSelectFIFOPOS();
        } else {
            toastr.warning('FIFO auto-select not available');
        }
    } else {
        console.log('Using Sales FIFO auto-select');
        if (typeof autoSelectFIFO === 'function') {
            autoSelectFIFO();
        } else {
            toastr.warning('FIFO auto-select not available');
        }
    }
}

// Update stock summary display
function updateBatchStockSummary(total_batched, overall, unbatched) {
    $('#batch_total_qty').text(total_batched || '0');
    $('#batch_overall_qty').text(overall || '0');
    $('#batch_unbatched_qty').text(unbatched || '0');
}
</script>
