<?php
require 'connDb.php';
$primaryKeyColumn = 'id';

$rows = getAllTips($pdo);

$columnNames = [];
if (!empty($rows)) {
    $columnNames = array_keys($rows[0]);
} else {
    try {
        $stmt = $pdo->query("DESCRIBE " . $dbTable);
        $columnNames = $stmt->fetchAll(PDO::FETCH_COLUMN);
        if (!in_array($primaryKeyColumn, $columnNames) && !empty($columnNames)) {
            $primaryKeyColumn = $columnNames[0];
        }
    } catch (PDOException $e) {
        error_log("Error describing table for columns: " . $e->getMessage());
        $columnNames = [];
    }
}
$formEditableColumns = array_filter($columnNames, function($col) use ($primaryKeyColumn) {
    return $col !== 'created_at' && $col !== 'updated_at';
});

$jsTableName = json_encode($dbTable);
$jsPrimaryKeyColumn = json_encode($primaryKeyColumn);
$jsFormEditableColumns = json_encode(array_values($formEditableColumns));
$jsAllColumnNames = json_encode(array_values($columnNames));
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Table Viewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
  <style>
    td, th {
      word-wrap: break-word;
      white-space: normal;
      max-width: 300px;
    }
    tfoot input {
      width: 100%;
      font-size: 0.875rem;
    }
    tfoot {
      display: table-header-group;
    }
    .toast-container {
      z-index: 1080;
    }
  </style>
</head>
<body class="bg-light">
<div class="container-fluid py-4">
  <h2 class="mb-4"><i class="fas fa-database me-2"></i>Tips Table Viewer</h2>

  <div class="d-flex justify-content-end mb-3">
    <button class="btn btn-primary" id="addNewRecordBtn"><i class="fa-solid fa-plus-circle me-1"></i>Add New Record</button>
  </div>

  <?php if (empty($rows) && empty($columnNames)): ?>
    <div class="alert alert-info text-center">
      No records found and no column information available. Please ensure the table exists or add some data.
    </div>
  <?php elseif (empty($rows) && !empty($columnNames)): ?>
    <div class="alert alert-info text-center">
      No records found. Click "Add New Record" to get started!
    </div>
    <div class="table-responsive">
      <table id="dataTable1" class="table table-striped table-bordered w-100 align-middle">
        <thead class="table-primary text-center">
          <tr>
            <?php foreach ($columnNames as $col): ?>
              <th><?= htmlspecialchars($col) ?></th>
            <?php endforeach; ?>
            <th>Actions</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <?php foreach ($columnNames as $col): ?>
              <th><input type="text" placeholder="Search <?= htmlspecialchars($col) ?>" class="form-control form-control-sm" /></th>
            <?php endforeach; ?>
            <th></th>
          </tr>
        </tfoot>
        <tbody>
        </tbody>
      </table>
    </div>
  <?php else: ?>
    <div class="table-responsive">
      <table id="dataTable1" class="table table-striped table-bordered w-100 align-middle">
        <thead class="table-primary text-center">
          <tr>
            <?php foreach ($columnNames as $col): ?>
              <th><?= htmlspecialchars($col) ?></th>
            <?php endforeach; ?>
            <th>Actions</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <?php foreach ($columnNames as $col): ?>
              <th><input type="text" placeholder="Search <?= htmlspecialchars($col) ?>" class="form-control form-control-sm" /></th>
            <?php endforeach; ?>
            <th></th>
          </tr>
        </tfoot>
        <tbody>
          <?php foreach ($rows as $row): ?>
            <tr data-row='<?= json_encode($row, JSON_HEX_TAG | JSON_HEX_AMP | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>'>
              <?php foreach ($columnNames as $col): ?>
                <td><?= formatCell($row[$col] ?? '') ?></td>
              <?php endforeach; ?>
              <td class="text-center">
                <button class="btn btn-sm btn-info viewEditBtn me-1" data-bs-toggle="tooltip" title="View/Edit">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="btn btn-sm btn-danger deleteRowBtn" data-id='<?= htmlspecialchars($row[$primaryKeyColumn] ?? '') ?>' data-bs-toggle="tooltip" title="Delete">
                  <i class="fas fa-trash-can"></i>
                </button>
              </td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  <?php endif; ?>
</div>

<div class="modal fade" id="rowModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <form id="modalForm" class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="rowModalLabel">Edit Row</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body row g-3" id="modalBodyContent"></div>
      <div class="modal-footer">
        <button type="submit" id="saveChangesBtn" class="btn btn-success" disabled>
          <span class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true"></span>
          Save Changes
        </button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <form id="addModalForm" class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-title">Add New Record</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body row g-3" id="addModalBodyContent"></div>
      <div class="modal-footer">
        <button type="submit" id="saveAddBtn" class="btn btn-success">
          <span class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true"></span>
          Add Record
        </button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="deleteConfirmModalLabel">Confirm Deletion</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete record ID: <span id="deleteRecordId" class="fw-bold"></span>?
        This action cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
          <span class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true"></span>
          Delete
        </button>
      </div>
    </div>
  </div>
</div>


<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="successToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        <i class="fa-solid fa-check-circle me-2"></i>
        <span id="successToastMessage"></span>
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>

  <div id="errorToast" class="toast align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        <i class="fa-solid fa-triangle-exclamation me-2"></i>
        <span id="errorToastMessage"></span>
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script>
const TABLE_NAME = <?= $jsTableName ?>;
const PRIMARY_KEY_COLUMN = <?= $jsPrimaryKeyColumn ?>;
const EDITABLE_COLUMNS = <?= $jsFormEditableColumns ?>;
const ALL_COLUMN_NAMES = <?= $jsAllColumnNames ?>;

let originalFormState = '';
let dataTableInstance;

const successToastEl = document.getElementById('successToast');
const successToastMsg = document.getElementById('successToastMessage');
const successToast = successToastEl ? new bootstrap.Toast(successToastEl, { delay: 3000 }) : null;

const errorToastEl = document.getElementById('errorToast');
const errorToastMsg = document.getElementById('errorToastMessage');
const errorToast = errorToastEl ? new bootstrap.Toast(errorToastEl, { delay: 5000 }) : null;

function showFeedback(type, message) {
    if (type === 'success' && successToast) {
        successToastMsg.textContent = message;
        successToast.show();
    } else if (type === 'error' && errorToast) {
        errorToastMsg.textContent = message;
        errorToast.show();
    } else {
        alert(message);
    }
}

function reloadTableData() {
    // For server-side rendered table, full page reload is still the most straightforward.
    // For a fully AJAX-driven DataTable, you'd use dataTableInstance.ajax.reload();
    location.reload();
}

$(document).ready(function () {
    const tableElement = $('#dataTable1');
    if (tableElement.length && tableElement.find('thead th').length > 1) {
        dataTableInstance = tableElement.DataTable({
            responsive: true, // This should now work with the added extension files
            pageLength: 10,
            initComplete: function () {
                this.api().columns().every(function () {
                    const that = this;
                    $('input', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
            }
        });
    } else {
        console.warn('DataTables not initialized, table element or headers missing.');
    }

    $('[data-bs-toggle="tooltip"]').tooltip();

    const rowModal = new bootstrap.Modal(document.getElementById('rowModal'));
    const modalBodyContent = $('#modalBodyContent');
    const saveChangesBtn = $('#saveChangesBtn');
    const saveChangesSpinner = saveChangesBtn.find('.spinner-border');
    const rowModalLabel = $('#rowModalLabel');

    $(document).on('click', '.viewEditBtn', function () {
        const rowData = $(this).closest('tr').data('row');
        modalBodyContent.empty();

        if (!rowData || Object.keys(rowData).length === 0) {
            showFeedback('error', 'No data found for this row.');
            return;
        }

        let primaryKeyValue = rowData[PRIMARY_KEY_COLUMN];
        rowModalLabel.text(`Edit Row (ID: ${primaryKeyValue})`);

        modalBodyContent.append(`<input type="hidden" name="${PRIMARY_KEY_COLUMN}" value="${primaryKeyValue}">`);
        modalBodyContent.append(`<input type="hidden" name="tableName" value="${TABLE_NAME}">`);


        for (const key of ALL_COLUMN_NAMES) {
            const value = rowData[key] === null ? '' : rowData[key];
            let inputHtml = '';
            let readonly = '';
            let colClass = 'col-md-6';

            if (key === PRIMARY_KEY_COLUMN || key === 'created_at' || key === 'updated_at') {
                readonly = 'readonly';
                inputHtml = `<input type="text" name="${key}" class="form-control" value="${value}" ${readonly}>`;
            } else if (key.toLowerCase().includes('description') || key.toLowerCase().includes('notes')) {
                inputHtml = `<textarea name="${key}" class="form-control" rows="3">${value}</textarea>`;
                colClass = 'col-12';
            }
            else {
                inputHtml = `<input type="text" name="${key}" class="form-control" value="${value}">`;
            }

            modalBodyContent.append(`
                <div class="${colClass}">
                    <label class="form-label">${key}</label>
                    ${inputHtml}
                </div>
            `);
        }

        rowModal.show();

        setTimeout(() => {
            originalFormState = $('#modalForm').serialize();
            saveChangesBtn.prop('disabled', true);
        }, 100);
    });

    $('#modalForm').on('input change', 'input, textarea, select', function () {
        saveChangesBtn.prop('disabled', $('#modalForm').serialize() === originalFormState);
    });

    $('#modalForm').submit(function (e) {
        e.preventDefault();
        saveChangesBtn.prop('disabled', true);
        saveChangesSpinner.removeClass('d-none');

        $.ajax({
            url: 'updateRow.php',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify($(this).serializeArray().reduce((obj, item) => {
                obj[item.name] = item.value;
                return obj;
            }, {})),
            success: function (response) {
                if (response.status === 'success' || response.status === 'info') {
                    showFeedback('success', response.message);
                    rowModal.hide();
                    reloadTableData();
                } else {
                    showFeedback('error', response.message);
                }
            },
            error: function (xhr, status, error) {
                showFeedback('error', `Update error: ${xhr.responseText || error}`);
            },
            complete: function () {
                saveChangesBtn.prop('disabled', false);
                saveChangesSpinner.addClass('d-none');
            }
        });
    });

    const addModal = new bootstrap.Modal(document.getElementById('addModal'));
    const addModalBodyContent = $('#addModalBodyContent');
    const saveAddBtn = $('#saveAddBtn');
    const saveAddSpinner = saveAddBtn.find('.spinner-border');

    $('#addNewRecordBtn').click(function() {
        addModalBodyContent.empty();

        addModalBodyContent.append(`<input type="hidden" name="tableName" value="${TABLE_NAME}">`);

        for (const key of EDITABLE_COLUMNS) {
            let inputType = 'text';
            let colClass = 'col-md-6';

            if (key.toLowerCase().includes('email')) inputType = 'email';
            else if (key.toLowerCase().includes('phone')) inputType = 'tel';
            else if (key.toLowerCase().includes('amount') || key.toLowerCase().includes('price')) inputType = 'number';
            else if (key.toLowerCase().includes('date')) inputType = 'date';
            else if (key.toLowerCase().includes('description') || key.toLowerCase().includes('notes')) {
                inputType = 'textarea';
                colClass = 'col-12';
            }

            let inputHtml;
            if (inputType === 'textarea') {
                inputHtml = `<textarea id="add-${key}" name="${key}" class="form-control" rows="3"></textarea>`;
            } else {
                inputHtml = `<input type="${inputType}" id="add-${key}" name="${key}" class="form-control" value="">`;
            }

            addModalBodyContent.append(`
                <div class="${colClass}">
                    <label for="add-${key}" class="form-label">${key}</label>
                    ${inputHtml}
                </div>
            `);
        }
        addModal.show();
    });

    $('#addModalForm').submit(function (e) {
        e.preventDefault();
        saveAddBtn.prop('disabled', true);
        saveAddSpinner.removeClass('d-none');

        $.ajax({
            url: 'addRow.php',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify($(this).serializeArray().reduce((obj, item) => {
                obj[item.name] = item.value;
                return obj;
            }, {})),
            success: function (response) {
                if (response.status === 'success') {
                    showFeedback('success', response.message);
                    addModal.hide();
                    reloadTableData();
                } else {
                    showFeedback('error', response.message);
                }
            },
            error: function (xhr, status, error) {
                showFeedback('error', `Add error: ${xhr.responseText || error}`);
            },
            complete: function () {
                saveAddBtn.prop('disabled', false);
                saveAddSpinner.addClass('d-none');
            }
        });
    });

    const deleteConfirmModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
    const deleteRecordIdSpan = $('#deleteRecordId');
    const confirmDeleteBtn = $('#confirmDeleteBtn');
    const confirmDeleteSpinner = confirmDeleteBtn.find('.spinner-border');
    let recordToDeleteId = null;

    $(document).on('click', '.deleteRowBtn', function () {
        recordToDeleteId = $(this).data('id');
        deleteRecordIdSpan.text(recordToDeleteId);
        deleteConfirmModal.show();
    });

    $('#confirmDeleteBtn').click(function () {
        if (!recordToDeleteId) return;

        confirmDeleteBtn.prop('disabled', true);
        confirmDeleteSpinner.removeClass('d-none');

        $.ajax({
            url: 'deleteRow.php',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ id: recordToDeleteId, tableName: TABLE_NAME }),
            success: function (response) {
                if (response.status === 'success') {
                    showFeedback('success', response.message);
                    deleteConfirmModal.hide();
                    reloadTableData();
                } else {
                    showFeedback('error', response.message);
                }
            },
            error: function (xhr, status, error) {
                showFeedback('error', `Delete error: ${xhr.responseText || error}`);
            },
            complete: function () {
                confirmDeleteBtn.prop('disabled', false);
                confirmDeleteSpinner.addClass('d-none');
                recordToDeleteId = null;
            }
        });
    });
});
</script>
</body>
</html>
