<?php
/**
 * Video Help Integration Template
 * 
 * This file shows how to add video help functionality to any page in your ITRPOS system.
 * Follow these steps to add video help to a new page:
 */

// Step 1: Include the video help functions at the top of your page
include 'functions/video_help.php';

// Step 2: Add video help button in your page header/actions area
// Option A: Full button with text
echo display_video_help_button('your_page_name', $conn, '<i class="fa fa-play-circle"></i> Watch Video', 'btn-outline-primary');

// Option B: Icon only button
echo display_video_help_icon('your_page_name', $conn, 'fa-play-circle', 'btn-outline-info');

// Step 3: Add the video help modal at the end of your page (before closing body tag)
echo display_video_help_modal();

/**
 * Example Integration for a page called "customer_list.php":
 */

/*
<?php
ob_start();
include 'db.php';
include 'auth.php';
require_right('Customer List');
include 'functions/video_help.php';  // ← Add this line
include 'layout.php';
?>

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Customer List</h4>
                <h6>Manage your customers</h6>
            </div>
            
            <div class="page-btn d-flex justify-content-end gap-2">
                <?= display_video_help_button('customer_list', $conn, '<i class="fa fa-play-circle"></i> Watch Video', 'btn-outline-primary') ?>
                <button class="btn btn-added" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                    <i class="fa fa-plus"></i> Add Customer
                </button>
            </div>
        </div>
        
        <!-- Your page content here -->
        
    </div>
</div>

<!-- Your existing modals and scripts -->

<?= display_video_help_modal() ?>
*/

/**
 * For POS pages or pages without layout.php:
 */

/*
<?php
include 'db.php';
include 'functions/video_help.php';  // ← Add this line
// ... other includes

// Add video help button in header
<a href="#" class="text-white" title="Watch Tutorial" onclick="showPageVideoHelp()">
    <i data-feather="play-circle"></i>
</a>

// Add this at the end of your page
?>

<!-- Video Help Modal -->
<div class="modal fade" id="pageVideoHelpModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pageVideoHelpTitle">Tutorial</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="pageVideoHelpDescription" class="alert alert-info mb-3"></div>
                <div class="ratio ratio-16x9">
                    <iframe id="pageVideoHelpFrame" src="" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function showPageVideoHelp() {
    <?php
    $video = get_video_help('your_page_name', $conn);
    if ($video): ?>
        document.getElementById("pageVideoHelpTitle").textContent = "<?= htmlspecialchars($video['video_title']) ?>";
        document.getElementById("pageVideoHelpDescription").textContent = "<?= htmlspecialchars($video['description']) ?>";
        
        let embedUrl = "<?= htmlspecialchars($video['video_url']) ?>";
        if (embedUrl.includes("youtube.com/watch")) {
            const videoId = embedUrl.split("v=")[1];
            if (videoId) {
                embedUrl = "https://www.youtube.com/embed/" + videoId;
            }
        } else if (embedUrl.includes("vimeo.com")) {
            const videoId = embedUrl.split("vimeo.com/")[1];
            if (videoId) {
                embedUrl = "https://player.vimeo.com/video/" + videoId;
            }
        }
        
        document.getElementById("pageVideoHelpFrame").src = embedUrl;
        new bootstrap.Modal(document.getElementById("pageVideoHelpModal")).show();
    <?php else: ?>
        Swal.fire({
            icon: 'info',
            title: 'No Tutorial Available',
            text: 'Video tutorial is not configured yet. Please contact your administrator.',
            confirmButtonColor: '#3085d6'
        });
    <?php endif; ?>
}

document.getElementById("pageVideoHelpModal").addEventListener("hidden.bs.modal", function () {
    document.getElementById("pageVideoHelpFrame").src = "";
});
</script>
*/

/**
 * Common page names to use:
 * - item_list (Product List)
 * - pos (POS System)
 * - customer_list (Customer List)
 * - supplier_list (Supplier List)
 * - sales_report (Sales Report)
 * - purchase_list (Purchase List)
 * - inventory_report (Inventory Report)
 * - settings (System Settings)
 * - category_list (Category Management)
 * - uom_management (UOM Management)
 * - expense_category (Expense Categories)
 * - bank_account_list (Bank Accounts)
 * - rider_list (Rider Management)
 * - table_list (Table Management)
 * - floor_list (Floor Management)
 */
?> 