<!-- Keyboard Shortcuts Help Modal -->
<div class="modal fade" id="keyboardShortcutsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header bg-gradient-primary text-white py-3">
                <h5 class="modal-title mb-0">
                    <i class="fas fa-keyboard"></i> Keyboard Shortcuts Guide
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-4" style="max-height: 70vh; overflow-y: auto;">
                
                <!-- Introduction -->
                <div class="alert alert-info mb-4">
                    <i class="fas fa-info-circle"></i>
                    <strong>Welcome to Mouse-Free POS!</strong><br>
                    Navigate the entire POS system using only your keyboard for faster data entry and improved efficiency.
                    Press <kbd>F1</kbd> anytime to open this help guide.
                </div>

                <!-- Navigation Section -->
                <div class="shortcut-section mb-4">
                    <h6 class="shortcut-category">
                        <i class="fas fa-arrows-alt text-primary"></i> Navigation & Focus
                    </h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>F2</kbd>
                                <span class="shortcut-desc">Focus on Product Code</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>F3</kbd>
                                <span class="shortcut-desc">Open Product Search Modal</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>F4</kbd>
                                <span class="shortcut-desc">Focus on Rate/Price</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>F5</kbd>
                                <span class="shortcut-desc">Focus on Quantity</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>F7</kbd>
                                <span class="shortcut-desc">Focus on Customer Search</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Esc</kbd>
                                <span class="shortcut-desc">Close Modal / Clear Focus</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Tab</kbd>
                                <span class="shortcut-desc">Move to Next Field</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Shift</kbd> + <kbd>Tab</kbd>
                                <span class="shortcut-desc">Move to Previous Field</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cart Operations -->
                <div class="shortcut-section mb-4">
                    <h6 class="shortcut-category">
                        <i class="fas fa-shopping-cart text-success"></i> Cart Operations
                    </h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>F6</kbd>
                                <span class="shortcut-desc">Add Item to Cart</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>↓</kbd> (from Product Code)
                                <span class="shortcut-desc">Focus on First Cart Item Qty</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>↑</kbd> <kbd>↓</kbd> (in Cart)
                                <span class="shortcut-desc">Navigate Between Cart Rows</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>←</kbd> <kbd>→</kbd> (in Cart)
                                <span class="shortcut-desc">Switch Between Rate/Qty Columns</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Enter</kbd> (in Cart)
                                <span class="shortcut-desc">Move to Next Field/Row</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>Delete</kbd>
                                <span class="shortcut-desc">Remove Selected Cart Item</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Space</kbd>
                                <span class="shortcut-desc">Select/Deselect Cart Item</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>A</kbd>
                                <span class="shortcut-desc">Select All Cart Items</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>K</kbd>
                                <span class="shortcut-desc">Clear Entire Cart</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>D</kbd>
                                <span class="shortcut-desc">Apply Discount</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bill Operations -->
                <div class="shortcut-section mb-4">
                    <h6 class="shortcut-category">
                        <i class="fas fa-file-invoice text-warning"></i> Bill Operations
                    </h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>F9</kbd>
                                <span class="shortcut-desc">Save & Print Bill</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>S</kbd>
                                <span class="shortcut-desc">Save Bill</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>N</kbd>
                                <span class="shortcut-desc">New Sale</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>P</kbd>
                                <span class="shortcut-desc">Print Preview</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>H</kbd>
                                <span class="shortcut-desc">Hold Current Bill</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>L</kbd>
                                <span class="shortcut-desc">View Hold Bills List</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>F10</kbd>
                                <span class="shortcut-desc">View GST Details</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>G</kbd>
                                <span class="shortcut-desc">GST Details (Alternative)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Features -->
                <div class="shortcut-section mb-4">
                    <h6 class="shortcut-category">
                        <i class="fas fa-cog text-info"></i> Additional Features
                    </h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>F8</kbd>
                                <span class="shortcut-desc">Open Barcode Scanner</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>B</kbd>
                                <span class="shortcut-desc">Toggle Auto Scan Mode</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>F12</kbd>
                                <span class="shortcut-desc">Quick Actions Menu</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>M</kbd>
                                <span class="shortcut-desc">Add New Customer</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>E</kbd>
                                <span class="shortcut-desc">Register Expense</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>T</kbd>
                                <span class="shortcut-desc">Transport Details</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>I</kbd>
                                <span class="shortcut-desc">Shipping Details</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>Y</kbd>
                                <span class="shortcut-desc">Loyalty Points</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>U</kbd>
                                <span class="shortcut-desc">Loyalty Settings</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sales Type Quick Switch -->
                <div class="shortcut-section mb-4">
                    <h6 class="shortcut-category">
                        <i class="fas fa-exchange-alt text-danger"></i> Quick Sales Type Switch
                    </h6>
                    <div class="row">
                        <div class="col-12">
                            <div class="shortcut-item">
                                <kbd>Alt</kbd> + <kbd>1</kbd> to <kbd>9</kbd>
                                <span class="shortcut-desc">Switch to Sales Type (by position in dropdown)</span>
                            </div>
                            <small class="text-muted ml-4">
                                Example: <kbd>Alt</kbd> + <kbd>1</kbd> = First sales type, 
                                <kbd>Alt</kbd> + <kbd>2</kbd> = Second sales type, etc.
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Modal Shortcuts -->
                <div class="shortcut-section mb-4">
                    <h6 class="shortcut-category">
                        <i class="fas fa-window-restore text-secondary"></i> Modal Navigation
                    </h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>Enter</kbd>
                                <span class="shortcut-desc">Confirm / Save (in modal)</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Esc</kbd>
                                <span class="shortcut-desc">Close Modal</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Ctrl</kbd> + <kbd>W</kbd>
                                <span class="shortcut-desc">Close Modal (Alternative)</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>Tab</kbd>
                                <span class="shortcut-desc">Navigate Modal Fields</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>↑</kbd> <kbd>↓</kbd>
                                <span class="shortcut-desc">Navigate Product Results</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>1</kbd> to <kbd>9</kbd>
                                <span class="shortcut-desc">Quick Select (Hold Bills)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Global Shortcuts -->
                <div class="shortcut-section mb-4">
                    <h6 class="shortcut-category">
                        <i class="fas fa-globe text-primary"></i> Global Shortcuts
                    </h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>F1</kbd>
                                <span class="shortcut-desc">Show This Help Guide</span>
                            </div>
                            <div class="shortcut-item">
                                <kbd>Alt</kbd> + <kbd>H</kbd>
                                <span class="shortcut-desc">Go to Home/Dashboard</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="shortcut-item">
                                <kbd>F11</kbd>
                                <span class="shortcut-desc">Toggle Full Screen</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tips & Tricks -->
                <div class="alert alert-success">
                    <h6 class="mb-2"><i class="fas fa-lightbulb"></i> Pro Tips</h6>
                    <ul class="mb-0 pl-4">
                        <li>Use <kbd>Tab</kbd> to move quickly between fields instead of clicking</li>
                        <li>Press <kbd>F2</kbd> after completing a sale to start a new one instantly</li>
                        <li>Navigate cart items with arrow keys and edit with <kbd>Enter</kbd></li>
                        <li>Use <kbd>F6</kbd> after entering quantity to add items quickly</li>
                        <li>Press <kbd>Esc</kbd> from any input to clear focus and use navigation shortcuts</li>
                        <li>All number inputs auto-select text when focused for quick data entry</li>
                        <li>Modal shortcuts work only when a modal is open</li>
                        <li>Main shortcuts work when no input field is focused</li>
                    </ul>
                </div>

                <!-- Workflow Examples -->
                <div class="card border-primary mb-3">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-route"></i> Common Workflows
                    </div>
                    <div class="card-body">
                        <div class="workflow-example mb-3">
                            <strong>Quick Sale Entry (Auto Scan Mode):</strong>
                            <ol class="mb-0 pl-4 small">
                                <li>Press <kbd>Ctrl</kbd> + <kbd>B</kbd> to enable Auto Scan mode</li>
                                <li>Type or scan product code, press <kbd>Enter</kbd></li>
                                <li>Product auto-adds to cart with quantity 1</li>
                                <li>Press <kbd>↓</kbd> to focus on cart quantity field</li>
                                <li>Edit quantity if needed, press <kbd>Enter</kbd></li>
                                <li>Use <kbd>↑</kbd> <kbd>↓</kbd> to navigate between cart items</li>
                                <li>Use <kbd>←</kbd> <kbd>→</kbd> to switch between Rate and Qty columns</li>
                                <li>Press <kbd>F9</kbd> to save and print</li>
                            </ol>
                        </div>
                        <div class="workflow-example mb-3">
                            <strong>Quick Sale Entry:</strong>
                            <ol class="mb-0 pl-4 small">
                                <li>Press <kbd>F2</kbd> to focus on product code</li>
                                <li>Type product code or scan barcode</li>
                                <li>Press <kbd>Tab</kbd> or <kbd>F4</kbd> to go to rate (auto-filled)</li>
                                <li>Press <kbd>Tab</kbd> or <kbd>F5</kbd> to go to quantity</li>
                                <li>Type quantity and press <kbd>F6</kbd> to add to cart</li>
                                <li>Repeat for more items</li>
                                <li>Press <kbd>F9</kbd> to save and print</li>
                            </ol>
                        </div>
                        <div class="workflow-example mb-3">
                            <strong>Edit Cart Item:</strong>
                            <ol class="mb-0 pl-4 small">
                                <li>Press <kbd>↓</kbd> or <kbd>↑</kbd> to navigate to the item</li>
                                <li>Press <kbd>Enter</kbd> to open edit modal</li>
                                <li>Use <kbd>Tab</kbd> to navigate fields</li>
                                <li>Press <kbd>Enter</kbd> to save changes</li>
                            </ol>
                        </div>
                        <div class="workflow-example">
                            <strong>Hold and Resume Bill:</strong>
                            <ol class="mb-0 pl-4 small">
                                <li>Press <kbd>Ctrl</kbd> + <kbd>H</kbd> to hold current bill</li>
                                <li>Enter customer name in the prompt</li>
                                <li>Later, press <kbd>Ctrl</kbd> + <kbd>L</kbd> to view hold bills</li>
                                <li>Press <kbd>1</kbd> to <kbd>9</kbd> to quickly resume a bill</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- Print This Guide -->
                <div class="text-center">
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.print()">
                        <i class="fas fa-print"></i> Print This Guide
                    </button>
                </div>
            </div>
            <div class="modal-footer bg-light py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Close <span class="kbd-hint">Esc</span>
                </button>
            </div>
        </div>
    </div>
</div>
