<?php

$pageTitle = "Group Members";
require_once '../includes/auth.php';


require_login();

$user = current_user();

require_once '../includes/header.php';
require_once '../includes/sidebar.php';

$groupId = $_GET['id'] ?? 0;

$groupStmt = $db->prepare("
    SELECT *
    FROM cds_groups
    WHERE id = ?
");

$groupStmt->execute([$groupId]);

$group = $groupStmt->fetch(PDO::FETCH_ASSOC);

$stmt = $db->prepare("
    SELECT
        cm.*,
        cgm.status AS membership_status,
        cgm.is_executive,
        cgm.executive_position
    FROM cds_group_members cgm
    JOIN corps_members cm
        ON cm.id=cgm.corps_member_id
    WHERE cgm.cds_group_id=?
");

$stmt->execute([$groupId]);

$members = $stmt->fetchAll(PDO::FETCH_ASSOC);

$availableStmt = $db->prepare("
    SELECT
        id,
        firstname,
        lastname,
        state_code
    FROM corps_members
    WHERE id NOT IN
    (
        SELECT corps_member_id
        FROM cds_group_members
        WHERE cds_group_id = ?
    )
    ORDER BY firstname ASC
");

$availableStmt->execute([$groupId]);

$availableMembers = $availableStmt->fetchAll(PDO::FETCH_ASSOC);

?>

<div class="overlay bg-black bg-opacity-50 w-100 h-100 position-fixed z-9 visibility-hidden opacity-0 duration-300">
</div>
<main class="dashboard-main">
    <?php require_once '../includes/topbar.php'; ?>

    <div class="dashboard-main-body">

        <div class="breadcrumb d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <div class="">
                <h6 class="fw-semibold mb-0"><?= $pageTitle; ?></h6>
                <p class="text-neutral-600 mt-4 mb-0"><?= APP_SHORT_NAME ?> > <?= $pageTitle; ?></p>
            </div>
        </div>

        <div class="my-16">
            <ul class="nav nav-pills bordered-tab mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button
                        class="nav-link d-flex align-items-center gap-8 text-secondary-light fw-medium text-sm text-hover-primary-600 text-capitalize bg-transparent px-20 py-12 active"
                        id="pills-payroll-tab" data-bs-toggle="pill" data-bs-target="#pills-payroll" type="button"
                        role="tab" aria-controls="pills-payroll" aria-selected="false">
                        <span class="d-flex tab-icon line-height-1 text-md">
                            <i class="ri-money-dollar-box-line"></i>
                        </span>
                        CDS GROUP MEMBERS
                    </button>
                </li>
            </ul>


            <div class="tab-content" id="pills-tabContent">
                <!-- Payroll tab start -->
                <div class="tab-pane fade show active" id="pills-payroll" role="tabpanel"
                    aria-labelledby="pills-payroll-tab" tabindex="0">
                    <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
                        <div
                            class="card-header border-bottom bg-base py-10 px-20 d-flex align-items-center justify-content-between">
                            <h6 class="text-lg fw-semibold mb-0">CDS GROUP MEMBERS</h6>
                        </div>
                        <div class="card-body p-0 dataTable-wrapper">
                            <div class="d-flex flex-wrap align-items-center gap-24 justify-content-between px-20 py-16">
                                <div class="d-flex flex-wrap align-items-center gap-16">
                                    <form class="navbar-search dt-search m-0">
                                        <input type="text" class="dt-input bg-transparent radius-4"
                                            aria-controls="dataTable" name="search" placeholder="Search...">
                                        <iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
                                    </form>
                                    <div class="">
                                        <select class="form-control form-select">
                                            <option value="Year 2025/2026">Year 2025/2026</option>
                                            <option value="Year 2026/2027">Year 2026/2027</option>
                                            <option value="Year 2027/2028">Year 2027/2028</option>
                                            <option value="Year 2028/2029">Year 2028/2029</option>
                                        </select>
                                    </div>
                                    <div class="dropdown">
                                        <button type="button"
                                            class="px-12 py-5-px border border-neutral-300 radius-8 d-flex align-items-center gap-20 "
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <span class="d-flex align-items-center gap-1 text-secondary-light text-sm">
                                                <i class="ri-file-upload-line text-md line-height-1"></i>
                                                Export
                                            </span>
                                            <span class="">
                                                <i class="ri-arrow-down-s-line"></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu p-12 border bg-base shadow">
                                            <li>
                                                <button type="button"
                                                    class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                                    data-bs-toggle="modal" data-bs-target="#exampleModalView">
                                                    <i class="ri-file-3-line"></i>
                                                    PDF
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button"
                                                    class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                                    data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                                                    <i class="ri-file-excel-line"></i>
                                                    Excel
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-8 text-secondary-light">
                                    <span class="">
                                        Rows per page:
                                    </span>
                                    <div class="dt-length">
                                        <select name="dataTable_length" aria-controls="dataTable"
                                            class="dt-input form-control form-select">
                                            <option value="5">5</option>
                                            <option value="10" selected>10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                    </div>
                                </div>

                                <button type="button"
                                    class="apply-leave-btn btn btn-primary-600 d-flex align-items-center gap-6 py-8 text-sm"
                                    data-bs-toggle="modal" data-bs-target="#addGroupModal">
                                    <span class="d-flex text-sm">
                                        <i class="ri-add-line"></i>
                                    </span>
                                    Add Member
                                </button>

                            </div>
                            <table class="table bordered-table mb-0 table-heading-dark-mode w-100 data-table"
                                id="dataTableTwo" data-page-length='10'>
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <div class="form-check style-check d-flex align-items-center">
                                                <input class="form-check-input" type="checkbox">
                                                <label class="form-check-label">
                                                    S/N
                                                </label>
                                            </div>
                                        </th>
                                        <th scope="col">State Code</th>
                                        <th scope="col">Full Name</th>
                                        <th scope="col">Phone Number</th>
                                        <th scope="col">Institution</th>
                                        <th scope="col">Course of Study</th>
                                        <th scope="col">Batch</th>
                                        <th scope="col">Stream</th>
                                        <th scope="col">Executive</th>
                                        <th scope="col">Position</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if(!empty($members)): ?>
                                    <?php foreach ($members as $index => $member): ?>
                                    <tr>
                                        <td>
                                            <div class="form-check style-check d-flex align-items-center">
                                                <input class="form-check-input" type="checkbox">
                                                <label class="form-check-label"><?= $index + 1 ?></label>
                                            </div>
                                        </td>
                                        <td><span
                                                class="text-primary-600"><?= htmlspecialchars($member['state_code']) ?></span>
                                        </td>
                                        <td>
                                            <?= htmlspecialchars($member['firstname']) ?>
                                            <?= htmlspecialchars($member['lastname']) ?>
                                        </td>
                                        <td><?= htmlspecialchars($member['phone']) ?></td>
                                        <td><?= $member['institution'] ?? 'No Instituion' ?></td>
                                        <td><?= $member['course_of_study']?? 'No Course of Study' ?></td>
                                        <td><?= $member['batch'] ?></td>
                                        <td><?= $member['stream'] ?? 'No Stream' ?></td>
                                        <td><?= $member['is_executive'] ?></td>
                                        <td><?= $member['executive_position'] ?? 'Not an Executive' ?></td>
                                        <td>
                                            <span
                                                class="bg-success-100 text-success-600 px-20 py-4 radius-4 fw-medium text-sm">
                                                <?= $member['membership_status'] ?>
                                            </span>
                                        </td>
                                        <td>
                                            <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#exampleModalDelete"
                                                onclick="setDeleteMember(<?= $member['id'] ?>)">
                                                Remove
                                            </button>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                    <?php else: ?>
                                    <tr>
                                        <td colspan="7" class="text-center py-5">
                                            <div class="d-flex flex-column align-items-center">
                                                <iconify-icon icon="mdi:account-group-outline" width="60"
                                                    class="text-secondary mb-3">
                                                </iconify-icon>

                                                <h6 class="mb-2">
                                                    No Corps Members Assigned
                                                </h6>
                                                <p class="text-secondary-light mb-0">
                                                    There are currently no corps members assigned to this CDS group.
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Payroll tab end -->
            </div>
</main>
<!-- Add Group modal start -->
<div class="modal fade" id="addGroupModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog modal-dialog-centered max-w-600-px">
        <div class="modal-content radius-16 bg-base">
            <div class=modal-header>
                <h6 class="text-lg fw-semibold text-primary-light mb-0">Add Member to Group
                </h6>
            </div>
            <div class="modal-body p-24">
                <form action="../actions/add_members_cds_group.php" method="POST">

                    <input type="hidden" name="group_id" value="<?= $groupId ?>">

                    <label>Select Corps Member</label>

                    <select name="corps_member_id" class="form-control" required>

                        <?php foreach($availableMembers as $member): ?>

                        <option value="<?= $member['id'] ?>">
                            <?= $member['state_code'] ?>
                            -
                            <?= $member['firstname'] ?>
                            <?= $member['lastname'] ?>
                        </option>

                        <?php endforeach; ?>

                    </select>

                    <button class="btn btn-primary mt-3">
                        Add Member
                    </button>

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


<!-- Modal Delete Event start -->
<div class="modal fade" id="exampleModalDelete" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog modal-dialog-centered max-w-340-px">
        <div class="modal-content radius-16 bg-base">
            <div class="modal-body pt-32 px-36 pb-24 text-center">
                <span class="mb-16 fs-1 line-height-1 text-danger">
                    <iconify-icon icon="fluent:delete-24-regular" class="menu-icon"></iconify-icon>
                </span>
                <h6 class="text-lg fw-semibold text-primary-light mb-0">Are your sure you want to remove this corps
                    member from group
                </h6>
                <div class="d-flex align-items-center justify-content-center gap-3 mt-24">
                    <button type="reset"
                        class="flex-grow-1 border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-24 py-11 radius-8">
                        Cancel
                    </button>
                    <form action="../actions/remove_member_from_group.php" method="POST">

                        <input type="hidden" name="member_id" id="delete_member_id">
                        <input type="hidden" name="group_id" value="<?= $groupId ?>">

                        <button type="submit"
                            class="flex-grow-1 btn btn-primary-600 border border-primary-600 text-md px-16 py-12 radius-8">
                            Remove Member
                        </button>

                    </form>
                    <script>
                    function setDeleteMember(id) {
                        document.getElementById('delete_member_id').value = id;
                    }
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal Delete Event end -->
<?php
 require_once "../includes/footer.php";
?>