<?php

declare(strict_types=1);

require_once __DIR__ . '/../library/auth.php';

$school_id = (int) $_SESSION['school_id'];

allow_roles(['admin', 'teacher']);

// ======================================================
// FETCH MEMBERS
// ======================================================

$query = "
    SELECT

        lm.*,

        s.name AS student_name,

        t.name AS teacher_name

    FROM library_members lm

    LEFT JOIN students s
        ON lm.reference_id = s.id
        AND lm.user_type = 'Student'

    LEFT JOIN teachers t
        ON lm.reference_id = t.id
        AND lm.user_type = 'Teacher'

    WHERE lm.school_id = ?

    ORDER BY lm.id DESC
";

$stmt = $pdo->prepare($query);

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

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

$page_title = 'Library Members';

require_once __DIR__ . '/../include/header.php';
require_once __DIR__ . '/../include/sidebar.php';

?>

<div class="content-wrapper">

    <!-- ============================================== -->
    <!-- PAGE HEADER -->
    <!-- ============================================== -->

    <section class="content-header">

        <div class="container-fluid">

            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">

                <div class="mb-2 mb-md-0">

                    <h1>

                        <i class="fas fa-users text-primary"></i>

                        Library Members

                    </h1>

                    <small class="text-muted">

                        Manage library members

                    </small>

                </div>

                <div>

                    <a
                        href="add_member.php"
                        class="btn btn-primary"
                    >

                        <i class="fas fa-plus"></i>

                        Add Member

                    </a>

                </div>

            </div>

        </div>

    </section>

    <!-- ============================================== -->
    <!-- MAIN CONTENT -->
    <!-- ============================================== -->

    <section class="content">

        <div class="container-fluid">

            <!-- ALERT -->

            <?php if (isset($_GET['msg'])) : ?>

                <div class="alert alert-success alert-dismissible fade show">

                    <?= htmlspecialchars($_GET['msg']) ?>

                    <button
                        type="button"
                        class="close"
                        data-dismiss="alert"
                    >

                        <span>&times;</span>

                    </button>

                </div>

            <?php endif; ?>

            <!-- ========================================== -->
            <!-- STATS -->
            <!-- ========================================== -->

            <div class="row mb-3">

                <!-- TOTAL -->

                <div class="col-12 col-md-4">

                    <div class="card shadow-sm border-0">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center">

                                <div>

                                    <h6 class="text-muted">

                                        Total Members

                                    </h6>

                                    <h3>

                                        <?= count($members) ?>

                                    </h3>

                                </div>

                                <div class="text-primary">

                                    <i class="fas fa-users fa-2x"></i>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- ACTIVE -->

                <div class="col-12 col-md-4">

                    <div class="card shadow-sm border-0">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center">

                                <div>

                                    <h6 class="text-muted">

                                        Active Members

                                    </h6>

                                    <h3>

                                        <?= count(array_filter($members, fn($m) => $m['status'] === 'Active')) ?>

                                    </h3>

                                </div>

                                <div class="text-success">

                                    <i class="fas fa-user-check fa-2x"></i>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- INACTIVE -->

                <div class="col-12 col-md-4">

                    <div class="card shadow-sm border-0">

                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center">

                                <div>

                                    <h6 class="text-muted">

                                        Inactive Members

                                    </h6>

                                    <h3>

                                        <?= count(array_filter($members, fn($m) => $m['status'] === 'Inactive')) ?>

                                    </h3>

                                </div>

                                <div class="text-danger">

                                    <i class="fas fa-user-times fa-2x"></i>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- ========================================== -->
            <!-- TABLE -->
            <!-- ========================================== -->

            <div class="card card-outline card-primary shadow-sm">

                <div class="card-header">

                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">

                        <h3 class="card-title mb-2 mb-md-0">

                            <i class="fas fa-id-card"></i>

                            Members List

                        </h3>

                        <!-- SEARCH -->

                        <div style="max-width:300px; width:100%;">

                            <input
                                type="text"
                                id="searchInput"
                                class="form-control"
                                placeholder="Search member..."
                            >

                        </div>

                    </div>

                </div>

                <div class="card-body p-0">

                    <!-- DESKTOP -->

                    <div class="table-responsive d-none d-md-block">

                        <table class="table table-hover mb-0">

                            <thead class="thead-light">

                                <tr>

                                    <th width="80">

                                        #

                                    </th>

                                    <th>

                                        Card No

                                    </th>

                                    <th>

                                        Member Name

                                    </th>

                                    <th>

                                        Type

                                    </th>

                                    <th>

                                        Status

                                    </th>

                                    <th width="160">

                                        Actions

                                    </th>

                                </tr>

                            </thead>

                            <tbody id="memberTable">

                                <?php if (!empty($members)) : ?>

                                    <?php foreach ($members as $index => $member) : ?>

                                        <?php

                                        $name =
                                            $member['user_type'] === 'Student'

                                                ? $member['student_name']

                                                : $member['teacher_name'];

                                        ?>

                                        <tr>

                                            <td>

                                                <?= $index + 1 ?>

                                            </td>

                                            <td>

                                                <strong>

                                                    <?= htmlspecialchars($member['card_no']) ?>

                                                </strong>

                                            </td>

                                            <td>

                                                <?= htmlspecialchars($name ?? '-') ?>

                                            </td>

                                            <td>

                                                <?php if ($member['user_type'] === 'Student') : ?>

                                                    <span class="badge badge-info p-2">

                                                        Student

                                                    </span>

                                                <?php else : ?>

                                                    <span class="badge badge-success p-2">

                                                        Teacher

                                                    </span>

                                                <?php endif; ?>

                                            </td>

                                            <td>

                                                <?php if ($member['status'] === 'Active') : ?>

                                                    <span class="badge badge-primary p-2">

                                                        Active

                                                    </span>

                                                <?php else : ?>

                                                    <span class="badge badge-danger p-2">

                                                        Inactive

                                                    </span>

                                                <?php endif; ?>

                                            </td>

                                            <td>

                                                <a
                                                    href="edit_member.php?id=<?= (int) $member['id'] ?>"
                                                    class="btn btn-sm btn-success"
                                                >

                                                    <i class="fas fa-edit"></i>

                                                </a>

                                            </td>

                                        </tr>

                                    <?php endforeach; ?>

                                <?php else : ?>

                                    <tr>

                                        <td
                                            colspan="6"
                                            class="text-center text-muted p-5"
                                        >

                                            No members found.

                                        </td>

                                    </tr>

                                <?php endif; ?>

                            </tbody>

                        </table>

                    </div>

                    <!-- MOBILE -->

                    <div class="d-block d-md-none p-3">

                        <?php if (!empty($members)) : ?>

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

                                <?php

                                $name =
                                    $member['user_type'] === 'Student'

                                        ? $member['student_name']

                                        : $member['teacher_name'];

                                ?>

                                <div class="card shadow-sm border-0 mb-3">

                                    <div class="card-body">

                                        <div class="d-flex justify-content-between">

                                            <div>

                                                <h5 class="mb-1">

                                                    <?= htmlspecialchars($name ?? '-') ?>

                                                </h5>

                                                <small class="text-muted">

                                                    <?= htmlspecialchars($member['card_no']) ?>

                                                </small>

                                            </div>

                                            <div>

                                                <?php if ($member['status'] === 'Active') : ?>

                                                    <span class="badge badge-success">

                                                        Active

                                                    </span>

                                                <?php else : ?>

                                                    <span class="badge badge-danger">

                                                        Inactive

                                                    </span>

                                                <?php endif; ?>

                                            </div>

                                        </div>

                                        <hr>

                                        <div class="d-flex justify-content-between align-items-center">

                                            <div>

                                                <?php if ($member['user_type'] === 'Student') : ?>

                                                    <span class="badge badge-info">

                                                        Student

                                                    </span>

                                                <?php else : ?>

                                                    <span class="badge badge-primary">

                                                        Teacher

                                                    </span>

                                                <?php endif; ?>

                                            </div>

                                            <div>

                                                <a
                                                    href="edit_member.php?id=<?= (int) $member['id'] ?>"
                                                    class="btn btn-sm btn-success"
                                                >

                                                    <i class="fas fa-edit"></i>

                                                    Edit

                                                </a>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            <?php endforeach; ?>

                        <?php else : ?>

                            <div class="alert alert-warning text-center">

                                No members found.

                            </div>

                        <?php endif; ?>

                    </div>

                </div>

            </div>

        </div>

    </section>

</div>

<!-- ============================================== -->
<!-- SEARCH -->
<!-- ============================================== -->

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>

'use strict';

$(document).ready(function () {

    $('#searchInput').on('keyup', function () {

        let value =
            $(this).val().toLowerCase();

        $('#memberTable tr').filter(function () {

            $(this).toggle(

                $(this)
                    .text()
                    .toLowerCase()
                    .indexOf(value) > -1
            );
        });
    });
});

</script>

<?php require_once __DIR__ . '/../include/footer.php'; ?>