<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="darlink-title mb-1">
            <i class="bi bi-file-earmark-text me-2"></i>Devis
        </h1>
        <p class="text-muted mb-0"><?= count($devis) ?> devis enregistré(s)</p>
    </div>

    <a href="index.php?page=devis_create" class="btn darlink-btn-primary">
        <i class="bi bi-plus-lg me-1"></i> Nouveau devis
    </a>
</div>

<div class="darlink-card darlink-table-card">
    <div class="darlink-table-toolbar">
        <div class="darlink-table-toolbar-left">
            <div class="darlink-table-search">
                <i class="bi bi-search"></i>
                <input type="text" id="devisSearch" placeholder="Rechercher un devis...">
            </div>

            <select id="devisStatusFilter" class="darlink-table-filter">
                <option value="">Tous les statuts</option>
                <option value="brouillon">Brouillon</option>
                <option value="validé">Validé</option>
                <option value="accepté">Accepté</option>
                <option value="refusé">Refusé</option>
                <option value="transformé">Transformé</option>
            </select>

            <input type="date" id="devisDateFrom" class="darlink-table-filter" title="Date début">
            <input type="date" id="devisDateTo" class="darlink-table-filter" title="Date fin">
        </div>

        <div class="darlink-table-toolbar-right">
            <button type="button" class="darlink-toolbar-btn" onclick="location.reload();">
                <i class="bi bi-arrow-clockwise"></i> Actualiser
            </button>
        </div>
    </div>

    <div class="table-responsive darlink-table-wrapper">
        <table class="table align-middle darlink-table darlink-table-modern" id="devisTable">
            <thead>
            <tr>
                <th class="darlink-sortable" data-column="0">Numéro <span class="sort-indicator">↕</span></th>
                <th class="darlink-sortable" data-column="1">Client <span class="sort-indicator">↕</span></th>
                <th class="darlink-sortable" data-column="2">Date <span class="sort-indicator">↕</span></th>
                <th class="darlink-sortable" data-column="3">Validité <span class="sort-indicator">↕</span></th>
                <th class="darlink-sortable" data-column="4">Statut <span class="sort-indicator">↕</span></th>
                <th class="text-end darlink-sortable" data-column="5">Total HT <span class="sort-indicator">↕</span></th>
                <th class="text-end darlink-sortable" data-column="6">Total TTC <span class="sort-indicator">↕</span></th>
                <th class="text-end darlink-sortable" data-column="7">Marge % <span class="sort-indicator">↕</span></th>
                <th class="text-end">Actions</th>
            </tr>
            </thead>

            <tbody>
            <?php if (empty($devis)): ?>
                <tr>
                    <td colspan="9" class="text-center text-muted py-5">
                        Aucun devis enregistré pour le moment.
                    </td>
                </tr>
            <?php endif; ?>

            <?php foreach ($devis as $item): ?>
                <tr data-edit-url="index.php?page=devis_show&id=<?= (int)$item['id'] ?>"
                    data-status="<?= htmlspecialchars($item['statut']) ?>"
                    data-date="<?= htmlspecialchars($item['date_devis']) ?>">
                    <td>
                        <strong class="darlink-table-code">
                            <?= htmlspecialchars($item['numero']) ?>
                        </strong>
                    </td>

                    <td class="fw-semibold">
                        <?= htmlspecialchars($item['client_nom']) ?>
                    </td>

                    <td><?= htmlspecialchars($item['date_devis']) ?></td>

                    <td><?= htmlspecialchars($item['validite'] ?? '-') ?></td>

                    <td>
                        <span class="darlink-badge darlink-badge-light">
                            <?= htmlspecialchars($item['statut']) ?>
                        </span>
                    </td>

                    <td class="text-end">
                        <?= number_format((float)$item['total_ht'], 2, ',', ' ') ?>
                    </td>

                    <td class="text-end fw-semibold">
                        <?= number_format((float)$item['total_ttc'], 2, ',', ' ') ?>
                    </td>

                    <td class="text-end">
                        <span class="darlink-badge darlink-badge-light">
                            <?= number_format((float)$item['marge_pourcentage'], 2, ',', ' ') ?> %
                        </span>
                    </td>

                    <td class="text-end darlink-actions">
                        <a class="darlink-icon-btn darlink-icon-btn-view"
                           href="index.php?page=devis_show&id=<?= (int)$item['id'] ?>"
                           title="Voir">
                            <i class="bi bi-eye"></i>
                        </a>

                        <a class="darlink-icon-btn darlink-icon-btn-edit"
                           href="index.php?page=devis_edit&id=<?= (int)$item['id'] ?>"
                           title="Modifier">
                            <i class="bi bi-pencil"></i>
                        </a>

                        <a class="darlink-icon-btn darlink-icon-btn-edit"
                           target="_blank"
                           href="index.php?page=devis_pdf&id=<?= (int)$item['id'] ?>"
                           title="PDF">
                            <i class="bi bi-file-earmark-pdf"></i>
                        </a>

                        <form method="post"
                              action="index.php?page=devis_duplicate"
                              class="d-inline"
                              onsubmit="return confirm('Dupliquer ce devis ?');">
                            <input type="hidden" name="id" value="<?= (int)$item['id'] ?>">
                            <button type="submit"
                                    class="darlink-icon-btn darlink-icon-btn-order"
                                    title="Dupliquer">
                                <i class="bi bi-files"></i>
                            </button>
                        </form>
                    </td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
function filterDevisTable() {
    const search = (document.getElementById('devisSearch')?.value || '').toLowerCase();
    const status = (document.getElementById('devisStatusFilter')?.value || '').toLowerCase();
    const from = document.getElementById('devisDateFrom')?.value || '';
    const to = document.getElementById('devisDateTo')?.value || '';

    document.querySelectorAll('#devisTable tbody tr').forEach(row => {
        const text = row.innerText.toLowerCase();
        const rowStatus = (row.dataset.status || '').toLowerCase();
        const rowDate = row.dataset.date || '';

        let visible = text.includes(search);

        if (status && rowStatus !== status) visible = false;
        if (from && rowDate < from) visible = false;
        if (to && rowDate > to) visible = false;

        row.style.display = visible ? '' : 'none';
    });
}

['devisSearch','devisStatusFilter','devisDateFrom','devisDateTo'].forEach(id => {
    document.getElementById(id)?.addEventListener('input', filterDevisTable);
    document.getElementById(id)?.addEventListener('change', filterDevisTable);
});
</script>