<?php
ob_start();
include 'db.php';
include 'auth.php';
require_right('Item List');
include 'layout.php';
?>

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>📋 Product Import Guide</h4>
                <h6>Quick reference for importing products</h6>
            </div>
            <div class="page-btn">
                <a href="item_list.php" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Back to Items
                </a>
                <a href="import_items.php?download_template=1" class="btn btn-success">
                    <i class="fa fa-download"></i> Download Template
                </a>
            </div>
        </div>
        
        <div class="row">
            <!-- Quick Start Card -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fa fa-rocket"></i> Quick Start</h6>
                    </div>
                    <div class="card-body">
                        <ol class="quick-steps">
                            <li>Download template</li>
                            <li>Fill your product data</li>
                            <li>Save as CSV file</li>
                            <li>Upload and import</li>
                        </ol>
                        <div class="alert alert-info">
                            <small><i class="fa fa-lightbulb"></i> <strong>Tip:</strong> Test with 2-3 products first</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Required Fields Card -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fa fa-exclamation-triangle"></i> Required Fields</h6>
                    </div>
                    <div class="card-body">
                        <ul class="required-fields">
                            <li><strong>Item Code</strong> - Unique identifier</li>
                            <li><strong>SKU Number</strong> - Stock keeping unit</li>
                            <li><strong>Name</strong> - Product name</li>
                            <li><strong>Category Name</strong> - Main category</li>
                            <li><strong>Retail Price</strong> - Selling price</li>
                            <li><strong>Cost Price</strong> - Purchase cost</li>
                            <li><strong>Tax Type</strong> - included/excluded</li>
                            <li><strong>Tax Rate Name</strong> - specific tax rate</li>
                            <li><strong>Item Type</strong> - single/bulk</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- Auto-Creation Card -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fa fa-magic"></i> Smart Features</h6>
                    </div>
                    <div class="card-body">
                        <ul class="smart-features">
                            <li>✅ Auto-creates categories</li>
                            <li>✅ Auto-creates sub-categories</li>
                            <li>✅ Prevents duplicates</li>
                            <li>✅ Case-insensitive matching</li>
                        </ul>
                        <div class="alert alert-success">
                            <small><i class="fa fa-check"></i> <strong>No setup needed!</strong> Categories are created automatically</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Field Details -->
        <div class="row mt-4">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fa fa-list"></i> Field Details</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Field</th>
                                        <th>Type</th>
                                        <th>Example</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-danger">
                                        <td><strong>Item Code*</strong></td>
                                        <td>Text</td>
                                        <td>ITM001</td>
                                        <td>Must be unique, no spaces</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <td><strong>SKU Number*</strong></td>
                                        <td>Text</td>
                                        <td>SKU001</td>
                                        <td>Must be unique</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <td><strong>Name*</strong></td>
                                        <td>Text</td>
                                        <td>iPhone 13 Pro</td>
                                        <td>Product display name</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <td><strong>Category Name*</strong></td>
                                        <td>Text</td>
                                        <td>Electronics</td>
                                        <td>Auto-created if missing</td>
                                    </tr>
                                    <tr class="table-warning">
                                        <td>Sub Category Name</td>
                                        <td>Text</td>
                                        <td>Mobile Phones</td>
                                        <td>Optional, auto-created</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <td><strong>Retail Price*</strong></td>
                                        <td>Decimal</td>
                                        <td>999.00</td>
                                        <td>Use . not , for decimals</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <td><strong>Cost Price*</strong></td>
                                        <td>Decimal</td>
                                        <td>800.00</td>
                                        <td>Purchase cost</td>
                                    </tr>
                                    <tr class="table-warning">
                                        <td>Reorder Quantity</td>
                                        <td>Number</td>
                                        <td>50</td>
                                        <td>Optional</td>
                                    </tr>
                                    <tr class="table-warning">
                                        <td>Reorder Level</td>
                                        <td>Number</td>
                                        <td>10</td>
                                        <td>Optional</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <td><strong>Tax Type*</strong></td>
                                        <td>Text</td>
                                        <td>included</td>
                                        <td>included or excluded</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <td><strong>Item Type*</strong></td>
                                        <td>Text</td>
                                        <td>single</td>
                                        <td>single or bulk</td>
                                    </tr>
                                    <tr class="table-warning">
                                        <td>UOM Name</td>
                                        <td>Text</td>
                                        <td>Pieces</td>
                                        <td>Unit of measure</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            <small class="text-muted">
                                <span class="badge bg-danger">Red</span> = Required | 
                                <span class="badge bg-warning text-dark">Yellow</span> = Optional
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Sample Data & Tips -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fa fa-file-text"></i> Sample Data</h6>
                    </div>
                    <div class="card-body">
                        <h6>Single Item:</h6>
                        <code class="small">
                            ITM001,SKU001,iPhone 13 Pro,Electronics,Mobile Phones,999.00,800.00,50,10,included,single,,,,Piece
                        </code>
                        
                        <h6 class="mt-3">Bulk Item:</h6>
                        <code class="small">
                            ITM002,SKU002,Chocolate Bars,Candy,Chocolates,2.50,1.80,100,20,excluded,bulk,10,20.00,5,Dozen
                        </code>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fa fa-lightbulb"></i> Pro Tips</h6>
                    </div>
                    <div class="card-body">
                        <ul class="tips-list">
                            <li>Use unique item codes</li>
                            <li>Prices in decimal format (999.00)</li>
                            <li>Categories auto-create if missing</li>
                            <li>Test with few products first</li>
                            <li>Download fresh template each time</li>
                        </ul>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fa fa-exclamation-circle"></i> Common Errors</h6>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-danger">
                            <strong>Duplicate Item Code</strong><br>
                            <small>Use unique codes for each product</small>
                        </div>

                        <div class="alert alert-info">
                            <strong>Wrong CSV Format</strong><br>
                            <small>Download fresh template</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="card mt-4">
            <div class="card-body text-center">
                <h6 class="mb-3">Ready to Import?</h6>
                <a href="import_items.php?download_template=1" class="btn btn-success me-2">
                    <i class="fa fa-download"></i> Download Template
                </a>
                <a href="item_list.php" class="btn btn-primary me-2">
                    <i class="fa fa-list"></i> Go to Item List
                </a>
                <button class="btn btn-info" onclick="window.print()">
                    <i class="fa fa-print"></i> Print Guide
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.quick-steps {
    padding-left: 20px;
    margin-bottom: 15px;
}

.quick-steps li {
    margin-bottom: 8px;
    color: #495057;
}

.required-fields, .smart-features, .tips-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.required-fields li, .smart-features li, .tips-list li {
    padding: 5px 0;
    border-bottom: 1px solid #f8f9fa;
    color: #495057;
}

.required-fields li:last-child, .smart-features li:last-child, .tips-list li:last-child {
    border-bottom: none;
}

.table-sm td, .table-sm th {
    padding: 8px 12px;
    font-size: 0.875rem;
}

code {
    background-color: #f8f9fa;
    color: #e83e8c;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.8rem;
    word-break: break-all;
}

.alert {
    margin-bottom: 0;
    padding: 8px 12px;
    font-size: 0.875rem;
}

/* Print styles */
@media print {
    .page-btn, .btn {
        display: none !important;
    }
    
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    
    .table-dark {
        background-color: #343a40 !important;
        color: white !important;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .col-lg-4, .col-lg-8 {
        margin-bottom: 20px;
    }
    
    .table-responsive {
        font-size: 0.8rem;
    }
}
</style>

<?php
ob_end_flush();
?> 