37338-vm/event_types.php

<?php
require_once 'db/config.php';
include '_header.php';
include '_navbar.php';

$pdo = db();
$stmt = $pdo->query("SELECT * FROM event_types ORDER BY display_order");
$event_types = $stmt->fetchAll(PDO::FETCH_ASSOC);

?>

<div class="container-fluid">
    <div class="row">
        <?php include '_sidebar.php'; ?>
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <h1 class="h2 pt-3 pb-2 mb-3 border-bottom">Event Types</h1>

            <?php if (isset($_SESSION['success_message'])): ?>
            <div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
                <?= $_SESSION['success_message']; ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <?php unset($_SESSION['success_message']); ?>
            <?php endif; ?>

            <div class="d-flex justify-content-end mb-3">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
                    Add New Event Type
                </button>
            </div>

                        <div class="table-responsive mt-4">
                <table class="table table-striped table-sm">
                    <thead>
                        <tr>
                            <th style="width: 30px;"></th>
                            <th>Name</th>
                            <th>Color</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="sortable-list">
                        <?php foreach ($event_types as $type): ?>
                        <tr data-id="<?= $type['id'] ?>">
                            <td class="handle"><i class="bi bi-grip-vertical"></i></td>
                            <td><?= htmlspecialchars($type['name']) ?></td>
                            <td><span class="badge" style="background-color: <?= htmlspecialchars($type['color']) ?>"><?= htmlspecialchars($type['color']) ?></span></td>
                            <td>
                                <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" data-id="<?= $type['id'] ?>" data-name="<?= htmlspecialchars($type['name']) ?>" data-color="<?= htmlspecialchars($type['color']) ?>" data-display-order="<?= htmlspecialchars($type['display_order']) ?>">
                                    Edit
                                </button>
                                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="<?= $type['id'] ?>">
                                    Delete
                                </button>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

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

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addModalLabel">Add Event Type</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="_add_event_type.php" method="post">
        <div class="modal-body">
            <div class="mb-3">
                <label for="addName" class="form-label">Name</label>
                <input type="text" class="form-control" id="addName" name="name" required>
            </div>
            <div class="mb-3">
                <label for="addColor" class="form-label">Color</label>
                <input type="color" class="form-control" id="addColor" name="color" value="#007bff" required>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" name="add" class="btn btn-primary">Add</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">Edit Event Type</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="_update_event_type.php" method="post">
        <div class="modal-body">
            <input type="hidden" id="editId" name="id">
            <input type="hidden" id="editDisplayOrder" name="display_order">
            <div class="mb-3">
                <label for="editName" class="form-label">Name</label>
                <input type="text" class="form-control" id="editName" name="name" required>
            </div>
            <div class="mb-3">
                <label for="editColor" class="form-label">Color</label>
                <input type="color" class="form-control" id="editColor" name="color" required>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" name="edit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">Delete Event Type</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this event type?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <a href="#" id="deleteLink" class="btn btn-danger">Delete</a>
      </div>
    </div>
  </div>
</div>


<?php include '_footer.php'; ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var editModal = document.getElementById('editModal');
    editModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var id = button.getAttribute('data-id');
        var name = button.getAttribute('data-name');
        var color = button.getAttribute('data-color');
        var display_order = button.getAttribute('data-display-order');
        
        var modalTitle = editModal.querySelector('.modal-title');
        var idInput = editModal.querySelector('#editId');
        var nameInput = editModal.querySelector('#editName');
        var colorInput = editModal.querySelector('#editColor');
        var displayOrderInput = editModal.querySelector('#editDisplayOrder');
        
        idInput.value = id;
        nameInput.value = name;
        colorInput.value = color;
        displayOrderInput.value = display_order;
    });

    var deleteModal = document.getElementById('deleteModal');
    deleteModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var id = button.getAttribute('data-id');
        var deleteLink = deleteModal.querySelector('#deleteLink');
        deleteLink.href = '_delete_event_type.php?id=' + id;
    });
    
    $(function() {
        $("#sortable-list").sortable({
            handle: ".handle",
            update: function(event, ui) {
                var order = $(this).sortable('toArray', {attribute: 'data-id'});
                $.post('_update_event_type_order.php', { order: order });
            }
        }).disableSelection();
    });
});
</script>