<?php include APP_PATH . '/views/layouts/header.php'; ?>

<div class="container-fluid">
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h1>Contacts</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo URL_PATH; ?>/admin/dashboard">Dashboard</a></li>
                        <li class="breadcrumb-item active">Contacts</li>
                    </ol>
                </nav>
            </div>
            <div class="col-auto">
                <a href="<?php echo URL_PATH; ?>/admin/contacts/create" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Add New Contact
                </a>
            </div>
        </div>
    </div>
    
    <!-- Search Box -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <input type="text" id="contactSearch" class="form-control" placeholder="🔍 Search contacts by name, phone, email, designation, or village...">
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <i class="bi bi-people"></i> All Contacts
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Designation</th>
                            <th>Village</th>
                            <th>Birthday</th>
                            <th>User</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="contactsTableBody">
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
            
            <div id="contactsPagination"></div>
            
            <div id="contactsEmpty" class="alert alert-info" style="display: none;">
                <i class="bi bi-info-circle"></i> No contacts found. 
                <a href="<?php echo URL_PATH; ?>/admin/contacts/create">Create your first contact</a>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo URL_PATH; ?>/js/ajax-search.js"></script>
<script>
// Initialize AJAX table handler for contacts
new AjaxTableHandler({
    searchInput: '#contactSearch',
    tableBody: '#contactsTableBody',
    paginationContainer: '#contactsPagination',
    emptyMessage: '#contactsEmpty',
    apiEndpoint: '<?php echo URL_PATH; ?>/admin/ajax/search-contacts',
    renderRow: (contact) => {
        const statusBadge = contact.status === 'active' 
            ? '<span class="badge bg-success">Active</span>' 
            : '<span class="badge bg-secondary">Inactive</span>';
        
        return `
            <tr>
                <td>${contact.id}</td>
                <td><i class="bi bi-person-fill"></i> ${escapeHtml(contact.full_name)}</td>
                <td>${escapeHtml(contact.contact_number)}</td>
                <td>${escapeHtml(contact.email || '')}</td>
                <td>${escapeHtml(contact.designation || '')}</td>
                <td>${escapeHtml(contact.village || '')}</td>
                <td>${formatDate(contact.date_of_birth)}</td>
                <td>${escapeHtml(contact.username)}</td>
                <td>${statusBadge}</td>
                <td>
                    <a href="<?php echo URL_PATH; ?>/admin/contacts/edit/${contact.id}" 
                       class="btn btn-sm btn-info" title="Edit">
                        <i class="bi bi-pencil"></i>
                    </a>
                    <a href="<?php echo URL_PATH; ?>/admin/contacts/delete/${contact.id}" 
                       class="btn btn-sm btn-danger btn-delete" 
                       data-name="${escapeHtml(contact.full_name)}"
                       title="Delete">
                        <i class="bi bi-trash"></i>
                    </a>
                </td>
            </tr>
        `;
    }
});
</script>

<?php include APP_PATH . '/views/layouts/footer.php'; ?>
