<?php
require_once '../../config.php';
require_once '../../functions.php';

check_user_auth();
$user_id = $_SESSION['user_id'];

$pageTitle = "Contact Groups - Marketing Engine";
include '../includes/header.php';
?>

<?php include '../includes/user_sidebar.php'; ?>
<?php include '../includes/navbar.php'; ?>

<div class="page-header">
    <h1 class="page-title">Manage SMS Groups</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Groups</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">All Groups</h3>
                <button class="btn btn-primary" id="btnNewGroup"><i class="fa fa-plus me-2"></i>New Group</button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="groupTable">
                        <thead>
                            <tr>
                                <th>S.N</th>
                                <th>Name</th>
                                <th>Contacts</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $stmt = $pdo->prepare("SELECT g.*, COUNT(m.id) as contact_count FROM contact_groups g LEFT JOIN contact_group_members m ON g.id = m.group_id WHERE g.owner_type = 'user' AND g.owner_id = ? GROUP BY g.id ORDER BY g.id DESC");
                            $stmt->execute([$user_id]);
                            $groups = $stmt->fetchAll();
                            foreach ($groups as $index => $group):
                                ?>
                                <tr data-id="<?php echo $group['id']; ?>">
                                    <td><?php echo $index + 1; ?></td>
                                    <td class="group-name"><?php echo htmlspecialchars($group['name']); ?></td>
                                    <td><?php echo $group['contact_count']; ?></td>
                                    <td>
                                        <?php if ($group['status'] == 'active'): ?>
                                            <span class="badge bg-success">Active</span>
                                        <?php else: ?>
                                            <span class="badge bg-danger">Inactive</span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger btn-status-toggle">
                                            <?php echo $group['status'] == 'active' ? '<i class="fa fa-eye-slash"></i> Inactive' : '<i class="fa fa-eye"></i> Active'; ?>
                                        </button>
                                        <button class="btn btn-sm btn-primary btn-edit"><i class="fa fa-edit"></i>
                                            Edit</button>
                                        <button class="btn btn-sm btn-success btn-view"><i class="fa fa-eye"></i> View
                                            Contact</button>
                                        <button class="btn btn-sm btn-danger btn-delete"><i
                                                class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                            <?php if (empty($groups)): ?>
                                <tr>
                                    <td colspan="5" class="text-center">No groups found. Create one!</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Group Modal -->
<div class="modal fade" id="groupModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Create New Group</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="groupForm">
                    <input type="hidden" name="action" id="groupAction" value="create_group">
                    <input type="hidden" name="group_id" id="groupId">

                    <div class="mb-3">
                        <label class="form-label">Group Name</label>
                        <input type="text" class="form-control" name="name" id="groupName" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Add Custom Number(s)</label>
                        <select class="form-control select2-tags" name="custom_numbers[]" id="customNumbers" multiple>
                        </select>
                        <small class="text-muted">Type a number and press Enter or comma to add</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Select Contacts</label>
                        <div class="alert alert-info py-1"><small>Select numbers to add to this group. Badges show other
                                group assignments.</small></div>
                        <div class="border p-2 rounded bg-white">
                            <div class="table-responsive">
                                <table class="table table-bordered text-nowrap border-bottom" id="contactsTable"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Contact List</th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Populated via JS -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btnSaveGroup">Save Group</button>
            </div>
        </div>
    </div>
</div>

<!-- View Contacts Modal -->
<div class="modal fade" id="viewContactsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Group Contacts</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="viewContactList" class="d-flex flex-wrap gap-2">
                    <!-- Populated via JS -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<?php
$extra_scripts = '
<link href="' . asset_url('assets/plugins/select2/select2.min.css') . '" rel="stylesheet" />
<link href="' . asset_url('assets/plugins/select2/select2.min.css') . '" rel="stylesheet" />
<link href="' . asset_url('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') . '" rel="stylesheet" />
<script src="' . asset_url('assets/plugins/select2/select2.full.min.js') . '"></script>
<script src="' . asset_url('assets/plugins/datatable/js/jquery.dataTables.min.js') . '"></script>
<script src="' . asset_url('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') . '"></script>
<script src="' . asset_url('assets/js/pages/groups.js') . '"></script>
';
include '../includes/footer.php';
?>