<?php
$modeIcons = [
    'Carte bancaire' => 'bi-credit-card-2-front',
    'Espèces' => 'bi-cash-stack',
    'Chèque' => 'bi-journal-check',
    'Virement' => 'bi-bank',
];

$resolveIcon = static function (string $libelle) use ($modeIcons): string {
    return $modeIcons[$libelle] ?? 'bi-wallet2';
};
?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="darlink-title mb-1">
            <i class="bi bi-credit-card me-2"></i>Modes de règlement
        </h1>
        <p class="text-muted mb-0">
            Gérer les modes de règlement utilisés pour les clients et les fournisseurs.
        </p>
    </div>

    <a href="index.php?page=parametres" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Retour aux paramètres
    </a>
</div>

<div class="darlink-card darlink-form-card mb-4">
    <div class="darlink-form-header">
        <h2 class="h5 mb-0">
            <i class="bi bi-plus-circle me-2"></i>Nouveau mode de règlement
        </h2>
    </div>

    <form
        method="post"
        action="index.php?page=parametres_modes_reglement_store"
    >
        <div class="darlink-form-body">
            <div class="row g-3 align-items-end">
                <div class="col-lg-4 darlink-form-group mb-0">
                    <label class="darlink-label">Libellé</label>

                    <input
                        type="text"
                        name="libelle"
                        class="darlink-input"
                        placeholder="Ex. Carte bancaire"
                        required
                    >
                </div>

                <div class="col-lg-2 darlink-form-group mb-0">
                    <label class="darlink-label">Comptant</label>

                    <select
                        name="comptant"
                        id="newModeComptant"
                        class="darlink-select"
                    >
                        <option value="1">Oui</option>
                        <option value="0">Non</option>
                    </select>
                </div>

                <div class="col-lg-2 darlink-form-group mb-0">
                    <label class="darlink-label">Délai (jours)</label>

                    <input
                        type="number"
                        name="delai_jours"
                        id="newModeDelai"
                        class="darlink-input text-end"
                        min="0"
                        value="0"
                        required
                    >
                </div>

                <div class="col-lg-2 darlink-form-group mb-0">
                    <label class="darlink-label">Ordre</label>

                    <input
                        type="number"
                        name="ordre_affichage"
                        class="darlink-input text-end"
                        min="1"
                        value="<?= count($modesReglement) + 1 ?>"
                        required
                    >
                </div>

                <div class="col-lg-2">
                    <button
                        type="submit"
                        class="btn darlink-btn-primary w-100"
                    >
                        <i class="bi bi-plus-lg me-1"></i> Ajouter
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="darlink-card darlink-table-card">
    <div class="darlink-table-toolbar">
        <div class="darlink-table-toolbar-left">
            <strong>
                <i class="bi bi-wallet2 me-1"></i>
                Liste des modes de règlement
            </strong>
        </div>

        <div class="darlink-table-toolbar-right">
            <span class="text-muted small">
                <?= count($modesReglement) ?> mode(s)
            </span>
        </div>
    </div>

    <div class="table-responsive darlink-table-wrapper">
        <table class="table align-middle darlink-table darlink-table-modern">
            <thead>
            <tr>
                <th style="width:95px;">Ordre</th>
                <th style="width:75px;">Icône</th>
                <th>Libellé</th>
                <th style="width:160px;">Type</th>
                <th style="width:150px;">Délai</th>
                <th style="width:160px;">État</th>
                <th class="text-end" style="width:150px;">Actions</th>
            </tr>
            </thead>

            <tbody>
            <?php if (empty($modesReglement)): ?>
                <tr>
                    <td colspan="7" class="text-center text-muted py-5">
                        Aucun mode de règlement enregistré.
                    </td>
                </tr>
            <?php endif; ?>

            <?php foreach ($modesReglement as $mode): ?>
                <?php
                $isComptant = (int)$mode['comptant'] === 1;
                $icon = $resolveIcon((string)$mode['libelle']);
                $formId = 'mode-reglement-' . (int)$mode['id'];
                ?>

                <tr>
                    <td>
                        <input
                            form="<?= $formId ?>"
                            type="number"
                            name="ordre_affichage"
                            class="darlink-input text-center fw-bold"
                            min="1"
                            value="<?= (int)$mode['ordre_affichage'] ?>"
                            required
                        >
                    </td>

                    <td class="text-center">
                        <span class="darlink-mode-icon">
                            <i class="bi <?= htmlspecialchars($icon) ?>"></i>
                        </span>
                    </td>

                    <td>
                        <input
                            form="<?= $formId ?>"
                            type="text"
                            name="libelle"
                            class="darlink-input"
                            value="<?= htmlspecialchars($mode['libelle']) ?>"
                            required
                        >
                    </td>

                    <td>
                        <select
                            form="<?= $formId ?>"
                            name="comptant"
                            class="darlink-select mode-comptant-select"
                            data-delay-target="mode-delay-<?= (int)$mode['id'] ?>"
                        >
                            <option
                                value="1"
                                <?= $isComptant ? 'selected' : '' ?>
                            >
                                Comptant
                            </option>

                            <option
                                value="0"
                                <?= !$isComptant ? 'selected' : '' ?>
                            >
                                Différé
                            </option>
                        </select>

                        <div class="mt-2">
                            <?php if ($isComptant): ?>
                                <span class="darlink-badge darlink-badge-success">
                                    <i class="bi bi-check-circle me-1"></i>
                                    COMPTANT
                                </span>
                            <?php else: ?>
                                <span class="darlink-badge darlink-badge-warning">
                                    <i class="bi bi-clock me-1"></i>
                                    DIFFÉRÉ
                                </span>
                            <?php endif; ?>
                        </div>
                    </td>

                    <td>
                        <input
                            form="<?= $formId ?>"
                            type="number"
                            name="delai_jours"
                            id="mode-delay-<?= (int)$mode['id'] ?>"
                            class="darlink-input text-end mode-delay-input"
                            min="0"
                            value="<?= (int)$mode['delai_jours'] ?>"
                            required
                            <?= $isComptant ? 'readonly' : '' ?>
                        >

                        <div class="small text-muted mt-2 text-end">
                            <?= (int)$mode['delai_jours'] > 0
                                ? (int)$mode['delai_jours'] . ' jours'
                                : '—' ?>
                        </div>
                    </td>

                    <td>
                        <select
                            form="<?= $formId ?>"
                            name="actif"
                            class="darlink-select"
                        >
                            <option
                                value="1"
                                <?= (int)$mode['actif'] === 1 ? 'selected' : '' ?>
                            >
                                Actif
                            </option>

                            <option
                                value="0"
                                <?= (int)$mode['actif'] === 0 ? 'selected' : '' ?>
                            >
                                Inactif
                            </option>
                        </select>
                    </td>

                    <td class="text-end darlink-actions">
                        <form
                            id="<?= $formId ?>"
                            method="post"
                            action="index.php?page=parametres_modes_reglement_update"
                            class="d-inline"
                        >
                            <input
                                type="hidden"
                                name="id"
                                value="<?= (int)$mode['id'] ?>"
                            >

                            <button
                                type="submit"
                                class="darlink-icon-btn darlink-icon-btn-edit"
                                title="Enregistrer"
                            >
                                <i class="bi bi-check-lg"></i>
                            </button>
                        </form>

                        <form
                            method="post"
                            action="index.php?page=parametres_modes_reglement_delete"
                            class="d-inline"
                            onsubmit="return confirm('Désactiver ce mode de règlement ?');"
                        >
                            <input
                                type="hidden"
                                name="id"
                                value="<?= (int)$mode['id'] ?>"
                            >

                            <button
                                type="submit"
                                class="darlink-icon-btn darlink-icon-btn-delete"
                                title="Désactiver"
                            >
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const newComptant = document.getElementById('newModeComptant');
    const newDelay = document.getElementById('newModeDelai');

    function syncDelayField(select, input) {
        if (!select || !input) {
            return;
        }

        const isComptant = select.value === '1';

        if (isComptant) {
            input.value = '0';
            input.readOnly = true;
        } else {
            input.readOnly = false;
        }
    }

    syncDelayField(newComptant, newDelay);

    if (newComptant) {
        newComptant.addEventListener('change', function () {
            syncDelayField(newComptant, newDelay);
        });
    }

    document
        .querySelectorAll('.mode-comptant-select')
        .forEach(function (select) {
            const delayTarget = select.dataset.delayTarget;
            const delayInput = document.getElementById(delayTarget);

            syncDelayField(select, delayInput);

            select.addEventListener('change', function () {
                syncDelayField(select, delayInput);
            });
        });
});
</script>