<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>簡易POSシステム by Zakinu</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>簡易POSシステム <span class="by-author">by Zakinu</span></h1>
            <div class="current-time" id="current-time"></div>
        </header>
        
        <div class="main-tabs">
            <button class="main-tab active" data-tab="pos">POS</button>
            <button class="main-tab" data-tab="admin">商品管理</button>
            <button class="main-tab" data-tab="graph">グラフ</button>
            <button class="main-tab" data-tab="income">収入計算</button>
        </div>
        <div class="tab-content">
            <div id="pos-content" class="tab-pane active">
                <div class="pos-container">
                    <div class="product-section">
                        <div class="category-tabs">
                            <button class="category-tab active" data-category="all">すべて</button>
                        </div>
                        <div class="product-grid" id="product-grid">
                        </div>
                    </div>
                    <div class="cart-section">
                        <div class="cart-header">
                            <h2>カート</h2>
                            <div class="cart-controls">
                                <button id="clear-cart" class="clear-button">カートをクリア</button>
                            </div>
                        </div>
                        <div class="cart-items" id="cart-items">
                        </div>
                        <div class="cart-summary">
                            <div class="summary-row">
                                <span>税抜合計:</span>
                                <span id="subtotal">¥0</span>
                            </div>
                            <div class="summary-row">
                                <span>消費税:</span>
                                <span id="tax">¥0</span>
                            </div>
                            <div class="summary-row total-row">
                                <span>合計:</span>
                                <span id="total">¥0</span>
                            </div>
                            <div class="payment-buttons" id="payment-buttons">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="history-container">
                    <div class="history-header">
                        <h2>売上履歴</h2>
                        <div class="history-controls">
                            <button id="export-csv" class="export-button">CSV出力</button>
                            <button id="export-excel" class="export-button excel-button">Excel出力</button>
                            <button id="clear-history" class="clear-button">履歴をクリア</button>
                        </div>
                    </div>
                    <div id="history-list"></div>
                </div>
            </div>
            <div id="admin-content" class="tab-pane">
                <div class="admin-panel">
                    <h2>商品管理</h2>
                    
                    <div class="admin-section">
                        <h3 class="section-title">商品とカテゴリ</h3>
                        <div class="admin-form">
                            <h4>新規商品追加</h4>
                            <input type="text" id="product-name" placeholder="商品名">
                            <input type="number" id="product-price" placeholder="税抜価格">
                            <input type="number" id="product-cost" placeholder="原価（任意）">
                            <input type="number" id="product-stock" placeholder="在庫数（任意）" min="0">
                            <select id="product-category"> 
                            </select>
                            <select id="product-tax-rate">
                                <option value="0">税率: 0%</option>
                                <option value="8">税率: 8%</option>
                                <option value="10" selected>税率: 10%</option>
                            </select>
                            <button onclick="addNewProduct()">商品を追加</button>
                        </div>
                        
                        <div class="admin-form">
                            <h4>商品一覧と編集</h4>
                            <div class="product-list-controls">
                                <select id="filter-category">
                                    <option value="all">すべてのカテゴリ</option>
                                </select>
                                <button onclick="refreshProductList()">更新</button>
                            </div>
                            <div class="product-list" id="product-list-container">
                            </div>
                        </div>
                        
                        <div class="admin-form">
                            <h4>新規カテゴリ追加</h4>
                            <input type="text" id="new-category" placeholder="カテゴリ名">
                            
                            <div class="color-selection">
                                <label>カテゴリーの色：</label>
                                <div class="preset-colors">
                                    <button type="button" class="color-preset" data-color="#a7e9f9" style="background-color: #a7e9f9;"></button>
                                    <button type="button" class="color-preset" data-color="#baffcb" style="background-color: #baffcb;"></button>
                                    <button type="button" class="color-preset" data-color="#ffcad1" style="background-color: #ffcad1;"></button>
                                    <button type="button" class="color-preset" data-color="#e0d4ff" style="background-color: #e0d4ff;"></button>
                                    <button type="button" class="color-preset" data-color="#ffddaa" style="background-color: #ffddaa;"></button>
                                    <button type="button" class="color-preset" data-color="#ebdcff" style="background-color: #ebdcff;"></button>
                                </div>
                                <div class="custom-color">
                                    <label for="category-color">カスタム色：</label>
                                    <input type="color" id="category-color" value="#a7e9f9">
                                </div>
                            </div>
                            
                            <button onclick="addNewCategory()">カテゴリを追加</button>
                        </div>

                        <div class="admin-form category-management">
                            <h4>カテゴリ管理</h4>
                            <div id="category-management-list" class="category-list">
                            </div>
                        </div>
                    </div>
                    
                    <div class="admin-section">
                        <h3 class="section-title">決済設定</h3>
                        <div class="admin-form">
                            <h4>決済手数料設定</h4>
                            <div class="payment-fee-settings">
                                <div class="payment-fee-item">
                                    <label for="cash-fee">現金手数料率 (%)</label>
                                    <input type="number" id="cash-fee" min="0" max="100" step="0.1" placeholder="0">
                                </div>
                                <div class="payment-fee-item">
                                    <label for="card-fee">カード手数料率 (%)</label>
                                    <input type="number" id="card-fee" min="0" max="100" step="0.1" placeholder="3.5">
                                </div>
                                <div class="payment-fee-item">
                                    <label for="barcode-fee">バーコード手数料率 (%)</label>
                                    <input type="number" id="barcode-fee" min="0" max="100" step="0.1" placeholder="1.5">
                                </div>
                                <div class="payment-fee-item">
                                    <label for="emoney-fee">電子マネー手数料率 (%)</label>
                                    <input type="number" id="emoney-fee" min="0" max="100" step="0.1" placeholder="2.0">
                                </div>
                                <button onclick="savePaymentFees()">手数料率を保存</button>
                            </div>
                        </div>
                        <div class="admin-form">
                            <h4>決済方法管理</h4>
                            <div class="payment-method-manager">
                                <div class="payment-method-list">
                                    <h5>現在の決済方法</h5>
                                    <div id="payment-methods-container">
                                    </div>
                                </div>
                                <div class="payment-method-form">
                                    <h5>新規決済方法追加</h5>
                                    <input type="text" id="new-payment-name" placeholder="決済方法名">
                                    <input type="number" id="new-payment-fee" min="0" max="100" step="0.1" placeholder="手数料率 (%)">
                                    <button onclick="addPaymentMethod()">追加</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="admin-section danger-zone">
                        <h3 class="section-title">システム管理</h3>
                        <div class="admin-form">
                            <h4>データ管理</h4>
                            <div class="delete-buttons">
                                <button class="delete-button" onclick="clearAllProducts()">すべての商品を削除</button>
                                <button class="delete-button" onclick="clearAllCategories()">すべてのカテゴリを削除</button>
                                <button class="delete-button dangerous" onclick="clearAllData()">すべてのデータをリセット</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="graph-content" class="tab-pane">
                <div class="graph-container">
                    <h2>売上分析グラフ</h2>
                    <div class="graph-tabs">
                        <button class="graph-tab active" data-graph="payment">支払い方法</button>
                        <button class="graph-tab" data-graph="product">購入商品</button>
                        <button class="graph-tab" data-graph="category">カテゴリ</button>
                        <button id="download-chart" class="download-button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                <polyline points="7 10 12 15 17 10"></polyline>
                                <line x1="12" y1="15" x2="12" y2="3"></line>
                            </svg>
                            ダウンロード
                        </button>
                    </div>
                    <div class="graph-content">
                        <canvas id="sales-chart"></canvas>
                    </div>
                </div>
            </div>
            <div id="income-content" class="tab-pane">
                <div class="income-container">
                    <h2>収入計算</h2>
                    <div class="income-period-selector">
                        <label for="income-period">期間:</label>
                        <select id="income-period">
                            <option value="all">すべて</option>
                            <option value="today">今日</option>
                            <option value="yesterday">昨日</option>
                            <option value="week">過去7日</option>
                            <option value="month">今月</option>
                            <option value="last-month">先月</option>
                        </select>
                        <button id="calculate-income" class="btn">計算</button>
                    </div>

                    <div class="income-summary">
                        <div class="income-card">
                            <h3>総合収入</h3>
                            <div class="income-data">
                                <div class="income-row">
                                    <span>売上合計:</span>
                                    <span id="total-sales">¥0</span>
                                </div>
                                <div class="income-row">
                                    <span>原価合計:</span>
                                    <span id="total-costs">¥0</span>
                                </div>
                                <div class="income-row">
                                    <span>決済手数料:</span>
                                    <span id="total-fees">¥0</span>
                                </div>
                                <div class="income-row total">
                                    <span>純利益:</span>
                                    <span id="net-income">¥0</span>
                                </div>
                                <div class="income-row">
                                    <span>粗利率:</span>
                                    <span id="profit-margin">0%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="payment-income-container">
                        <h3>決済方法別収入</h3>
                        <div class="payment-income-list" id="payment-income-list">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <p>© 2025 Zakinu. All Rights Reserved. | <a href="privacy-policy.html" class="footer-link">プライバシーポリシー</a> | <a href="terms-of-service.html" class="footer-link">利用規約</a></p>
            <p class="licenses">
                <small>
                    使用ライブラリ: 
                    <a href="https://www.chartjs.org" target="_blank" rel="noopener">Chart.js</a> (MIT License) | 
                    <a href="https://fonts.google.com/specimen/Noto+Sans+JP" target="_blank" rel="noopener">Noto Sans JP</a> (SIL Open Font License)
                </small>
            </p>
        </footer>
    </div>
    
    <div id="edit-product-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>商品編集</h3>
                <button class="modal-close" onclick="closeEditModal()">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit-product-id">
                <label for="edit-product-name">商品名</label>
                <input type="text" id="edit-product-name" placeholder="商品名">
                
                <label for="edit-product-price">税抜価格</label>
                <input type="number" id="edit-product-price" placeholder="税抜価格">
                
                <label for="edit-product-cost">原価（任意）</label>
                <input type="number" id="edit-product-cost" placeholder="原価">
                
                <label for="edit-product-stock">在庫数（任意）</label>
                <input type="number" id="edit-product-stock" placeholder="在庫数" min="0">
                
                <label for="edit-product-category">カテゴリ</label>
                <select id="edit-product-category">
                </select>
                
                <label for="edit-product-tax-rate">税率</label>
                <select id="edit-product-tax-rate">
                    <option value="0">税率: 0%</option>
                    <option value="8">税率: 8%</option>
                    <option value="10">税率: 10%</option>
                </select>
            </div>
            <div class="modal-footer">
                <button class="modal-cancel" onclick="closeEditModal()">キャンセル</button>
                <button class="modal-save" onclick="saveProductEdit()">保存</button>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    
    <div id="notice-modal" class="modal notice-modal active">
        <div class="modal-content notice-modal-content">
            <div class="modal-body">
                <div class="notice-message">
                    <p class="notice-title">本サービスに決済機能はございません</p>
                    <p class="notice-description">このシステムは売上の記録・管理のみを目的としており、実際の支払い処理は行いません。</p>
                </div>
            </div>
            <div class="modal-footer">
                <button id="notice-accept" class="modal-save">同意して続ける</button>
            </div>
        </div>
    </div>
</body>
</html> 