<?php
ob_start();
include 'db.php';

include 'layout.php';

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        if ($_POST['action'] === 'add' || $_POST['action'] === 'edit') {
            $page_name = $conn->real_escape_string($_POST['page_name']);
            $page_title = $conn->real_escape_string($_POST['page_title']);
            $video_url = $conn->real_escape_string($_POST['video_url']);
            $video_title = $conn->real_escape_string($_POST['video_title']);
            $description = $conn->real_escape_string($_POST['description']);
            $is_active = isset($_POST['is_active']) ? 1 : 0;
            
            if ($_POST['action'] === 'add') {
                $sql = "INSERT INTO video_help (page_name, page_title, video_url, video_title, description, is_active) 
                        VALUES ('$page_name', '$page_title', '$video_url', '$video_title', '$description', $is_active)";
            } else {
                $id = (int)$_POST['id'];
                $sql = "UPDATE video_help SET page_name='$page_name', page_title='$page_title', video_url='$video_url', 
                        video_title='$video_title', description='$description', is_active=$is_active WHERE id=$id";
            }
            
            if ($conn->query($sql)) {
                $success_message = $_POST['action'] === 'add' ? 'Video help added successfully!' : 'Video help updated successfully!';
            } else {
                $error_message = 'Error: ' . $conn->error;
            }
        } elseif ($_POST['action'] === 'delete') {
            $id = (int)$_POST['id'];
            if ($conn->query("DELETE FROM video_help WHERE id=$id")) {
                $success_message = 'Video help deleted successfully!';
            } else {
                $error_message = 'Error: ' . $conn->error;
            }
        }
    }
}

// Fetch existing video help entries
$video_help_list = $conn->query("SELECT * FROM video_help ORDER BY page_title");
?>

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Video Help Management</h4>
                <h6>Manage video tutorials for different pages</h6>
            </div>
            
            <?php if (isset($success_message)): ?>
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <?= $success_message ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>
            
            <?php if (isset($error_message)): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <?= $error_message ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>

            <div class="page-btn">
                <button class="btn btn-added" data-bs-toggle="modal" data-bs-target="#addVideoModal">
                    <i class="fa fa-plus"></i> Add Video Help
                </button>
            </div>
        </div>

        <div class="card">
            <div class="table-responsive">
                <table class="table datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Page Name</th>
                            <th>Page Title</th>
                            <th>Video Title</th>
                            <th>Video URL</th>
                            <th>Status</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php while ($row = $video_help_list->fetch_assoc()): ?>
                        <tr>
                            <td><?= $row['id'] ?></td>
                            <td><code><?= htmlspecialchars($row['page_name']) ?></code></td>
                            <td><?= htmlspecialchars($row['page_title']) ?></td>
                            <td><?= htmlspecialchars($row['video_title']) ?></td>
                            <td>
                                <a href="<?= htmlspecialchars($row['video_url']) ?>" target="_blank" class="text-primary">
                                    <?= strlen($row['video_url']) > 50 ? substr($row['video_url'], 0, 50) . '...' : $row['video_url'] ?>
                                </a>
                            </td>
                            <td>
                                <span class="badge <?= $row['is_active'] ? 'bg-success' : 'bg-secondary' ?>">
                                    <?= $row['is_active'] ? 'Active' : 'Inactive' ?>
                                </span>
                            </td>
                            <td class="text-end">
                                <button type="button" class="btn btn-sm btn-outline-warning" 
                                        onclick="editVideo(<?= htmlspecialchars(json_encode($row)) ?>)">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger" 
                                        onclick="deleteVideo(<?= $row['id'] ?>, '<?= htmlspecialchars($row['page_title']) ?>')">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        <?php endwhile; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Video Modal -->
<div class="modal fade" id="addVideoModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form method="POST" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Add Video Help</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="action" id="formAction" value="add">
                <input type="hidden" name="id" id="videoId">
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Page Name (URL identifier)</label>
                            <input type="text" name="page_name" id="pageName" class="form-control" required 
                                   placeholder="e.g., item_list, pos, customer_list">
                            <small class="text-muted">Use lowercase with underscores (e.g., item_list)</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Page Title</label>
                            <input type="text" name="page_title" id="pageTitle" class="form-control" required 
                                   placeholder="e.g., Item List, POS System">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Video Title</label>
                    <input type="text" name="video_title" id="videoTitle" class="form-control" required 
                           placeholder="e.g., How to Add/Manage Products">
                </div>
                
                <div class="form-group">
                    <label>Video URL</label>
                    <input type="url" name="video_url" id="videoUrl" class="form-control" required 
                           placeholder="https://www.youtube.com/watch?v=...">
                    <small class="text-muted">Supports YouTube, Vimeo, and direct video links</small>
                </div>
                
                <div class="form-group">
                    <label>Description</label>
                    <textarea name="description" id="description" class="form-control" rows="3" 
                              placeholder="Brief description of what this video covers"></textarea>
                </div>
                
                <div class="form-check">
                    <input type="checkbox" name="is_active" id="isActive" class="form-check-input" checked>
                    <label class="form-check-label" for="isActive">Active</label>
                </div>
            </div>
            
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteVideoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the video help for "<span id="deletePageTitle"></span>"?</p>
                <p class="text-danger">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <form method="POST" style="display: inline;">
                    <input type="hidden" name="action" value="delete">
                    <input type="hidden" name="id" id="deleteVideoId">
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
function editVideo(videoData) {
    $('#modalTitle').text('Edit Video Help');
    $('#formAction').val('edit');
    $('#videoId').val(videoData.id);
    $('#pageName').val(videoData.page_name);
    $('#pageTitle').val(videoData.page_title);
    $('#videoTitle').val(videoData.video_title);
    $('#videoUrl').val(videoData.video_url);
    $('#description').val(videoData.description);
    $('#isActive').prop('checked', videoData.is_active == 1);
    
    $('#addVideoModal').modal('show');
}

function deleteVideo(id, pageTitle) {
    $('#deleteVideoId').val(id);
    $('#deletePageTitle').text(pageTitle);
    $('#deleteVideoModal').modal('show');
}

// Reset modal when closed
$('#addVideoModal').on('hidden.bs.modal', function () {
    $('#modalTitle').text('Add Video Help');
    $('#formAction').val('add');
    $('#videoId').val('');
    $('#pageName').val('');
    $('#pageTitle').val('');
    $('#videoTitle').val('');
    $('#videoUrl').val('');
    $('#description').val('');
    $('#isActive').prop('checked', true);
});
</script> 