<?= $this->include('partials/html') ?>

<head>
    <?php echo view('partials/title-meta', ['title' => $title]) ?>
    <?= $this->include('partials/head-css') ?>
    <style>
        .pp-card { background: #fff; }
        .pp-meta { font-size: 13px; color: #6c757d; }
        .pp-table { font-size: 13px; }
        .pp-table thead th { text-transform: uppercase; font-size: 11px; letter-spacing: .3px; }
        .pp-empty { color: #6c757d; }
        .pp-detail-box { white-space: pre-line; font-size: 13px; color: #495057; }
    </style>
</head>

<body>
<div class="wrapper">
    <?= $this->include('partials/menu') ?>

    <div class="page-content">
        <div class="page-container">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h4 class="page-title"><?= esc($title) ?></h4>
                        <p class="pp-meta mb-0"><?= esc($subtitle) ?></p>
                    </div>
                </div>
            </div>

            <?php if (!empty($errorMessage)): ?>
                <div class="row">
                    <div class="col-12">
                        <div class="alert alert-danger" role="alert">
                            Erreur de connexion Perfex : <?= esc($errorMessage) ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

            <div class="row">
                <div class="col-12">
                    <div class="card pp-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div>
                                    <h5 class="mb-1">Projet #<?= (int)$projectId ?></h5>
                                    <?php if (!empty($project)): ?>
                                        <div class="pp-meta">
                                            <?= esc((string)($project['name'] ?? '')) ?>
                                            <?php if (!empty($project['start_date'])): ?>
                                                · début : <?= esc((string)$project['start_date']) ?>
                                            <?php endif; ?>
                                            <?php if (!empty($project['deadline'])): ?>
                                                · échéance : <?= esc((string)$project['deadline']) ?>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <span class="badge bg-primary"><?= count($tasks) ?> tâche(s)</span>
                            </div>

                            <?php if (empty($tasks)): ?>
                                <div class="pp-empty">Aucune tâche trouvée pour ce projet.</div>
                            <?php else: ?>
                                <div class="table-responsive">
                                    <table id="pp-tasks-table" class="table table-striped table-hover align-middle pp-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Tâche</th>
                                                <th class="no-sort">Détails</th>
                                                <th>Statut</th>
                                                <th>Priorité</th>
                                                <th>Début</th>
                                                <th>Échéance</th>
                                                <th>Créée par</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php foreach ($tasks as $task): ?>
                                                <tr>
                                                    <td><?= (int)($task['id'] ?? 0) ?></td>
                                                    <td><strong><?= esc((string)($task['name'] ?? '')) ?></strong></td>
                                                    <td>
                                                        <button
                                                            type="button"
                                                            class="btn btn-outline-primary btn-sm pp-toggle-details"
                                                            data-open="0"
                                                            data-task-id="<?= (int)($task['id'] ?? 0) ?>"
                                                            data-description="<?= base64_encode((string)($task['description'] ?? '')) ?>"
                                                        >
                                                            Détails
                                                        </button>
                                                    </td>
                                                    <td>
                                                        <?php $statusName = trim((string)($task['status_name'] ?? '')); ?>
                                                        <?= esc($statusName !== '' ? $statusName : (string)($task['status'] ?? '')) ?>
                                                    </td>
                                                    <td><?= esc((string)($task['priority'] ?? '')) ?></td>
                                                    <td><?= esc((string)($task['startdate'] ?? '')) ?></td>
                                                    <td><?= esc((string)($task['duedate'] ?? '')) ?></td>
                                                    <td>
                                                        <?= esc(trim((string)($task['creator_firstname'] ?? '') . ' ' . (string)($task['creator_lastname'] ?? ''))) ?>
                                                    </td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?= $this->include('partials/footer-scripts') ?>
<?= $this->include('partials/datatables') ?>

<script>
    (function () {
        'use strict';

        function escapeHtml(text) {
            var div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function closeDetailsRow($btn) {
            var taskId = String($btn.attr('data-task-id') || '');
            $('#pp-detail-row-' + taskId).remove();
            $btn.attr('data-open', '0').text('Détails').removeClass('btn-primary').addClass('btn-outline-primary');
        }

        function openDetailsRow($btn) {
            var taskId = String($btn.attr('data-task-id') || '');
            var encodedDescription = String($btn.attr('data-description') || '');
            var decodedDescription = '';
            try {
                decodedDescription = atob(encodedDescription);
            } catch (e) {
                decodedDescription = '';
            }

            var safeDescription = decodedDescription.trim() === ''
                ? '<span class="text-muted">Aucune description.</span>'
                : decodedDescription;

            var colCount = $('#pp-tasks-table thead th').length;
            var html = '<tr id="pp-detail-row-' + taskId + '" class="pp-details-row">' +
                '<td colspan="' + colCount + '">' +
                '<div class="pp-detail-box"><strong>Description :</strong><br>' + safeDescription + '</div>' +
                '</td></tr>';

            $btn.closest('tr').after(html);
            $btn.attr('data-open', '1').text('Masquer').removeClass('btn-outline-primary').addClass('btn-primary');
        }

        $(document).ready(function () {
            initDataTable('#pp-tasks-table', {
                order: [[0, 'desc']],
                pageLength: 25,
                columnDefs: [
                    { targets: 'no-sort', orderable: false, searchable: false }
                ]
            });

            $(document).on('click', '.pp-toggle-details', function () {
                var $btn = $(this);
                if ($btn.attr('data-open') === '1') {
                    closeDetailsRow($btn);
                } else {
                    closeDetailsRow($('.pp-toggle-details[data-open="1"]'));
                    openDetailsRow($btn);
                }
            });

            $(document).on('draw.dt', '#pp-tasks-table', function () {
                $('.pp-details-row').remove();
                $('.pp-toggle-details[data-open="1"]').each(function () {
                    $(this).attr('data-open', '0').text('Détails').removeClass('btn-primary').addClass('btn-outline-primary');
                });
            });
        });
    })();
</script>
</body>
</html>
