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

check_user_auth();

$pageTitle = "Contacts - User Panel";
include '../includes/header.php';
?>
<link href="<?php echo asset_url('assets/plugins/datatable/css/dataTables.bootstrap5.min.css'); ?>" rel="stylesheet" />
<link href="<?php echo asset_url('assets/plugins/select2/select2.min.css'); ?>" rel="stylesheet" />

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

<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Contacts</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Management</a></li>
            <li class="breadcrumb-item active" aria-current="page">Contacts</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-xl-12 col-md-12">
        <div class="card">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <h3 class="card-title">All Contacts</h3>
                <button type="button" class="btn btn-primary" id="btnAddContact">
                    <i class="fe fe-plus me-2"></i>Add New Contact
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="contactsTable">
                        <thead>
                            <tr>
                                <th>Number</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Data populated by DataTables -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- Add/Edit Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">New Contact</h5>
                <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="contactForm">
                    <input type="hidden" id="action" name="action" value="add_contact">
                    <input type="hidden" id="contactId" name="id" value="">

                    <div class="form-group">
                        <label class="form-label">Phone Number</label>
                        <input type="text" class="form-control" name="phone" id="phone" placeholder="e.g. 01712345678"
                            required>
                    </div>

                    <!-- Optional: Name field if needed, but strictly keeping to Number/Action request mainly -->
                    <!-- Adding name as good practice, can hide if user insists on 2 columns only logic -->
                    <div class="form-group">
                        <label class="form-label">Name (Optional)</label>
                        <input type="text" class="form-control" name="name" id="name" placeholder="Contact Name">
                    </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="btnSaveContact">Save</button>
            </div>
        </div>
    </div>
</div>

<?php
$extra_scripts = '
    <script src="' . asset_url('assets/plugins/datatable/js/jquery.dataTables.min.js') . '"></script>
    <script src="' . asset_url('assets/plugins/datatable/js/dataTables.bootstrap5.js') . '"></script>
    <script src="' . asset_url('assets/js/pages/contacts.js') . '"></script>
';
include '../includes/footer.php';
?>